Команды HTML и основные принципы построения страниц WWW
Страницы WWW (Word Wide Web), графические вставки, видео- и звуковые данные. Стилевое и шрифтовое оформление страниц WWW, язык разметки гипертекста HTML (Hyper Markup Language). Современные средства создания страниц WWW работают в режиме WYSIWYG.
| Рубрика | Программирование, компьютеры и кибернетика |
| Вид | реферат |
| Язык | русский |
| Дата добавления | 18.03.2010 |
| Размер файла | 29,7 K |
Отправить свою хорошую работу в базу знаний просто. Используйте форму, расположенную ниже
Студенты, аспиранты, молодые ученые, использующие базу знаний в своей учебе и работе, будут вам очень благодарны.
Команды HTML и основные принципы построения страниц WWW
Бродя по паутине, частенько натыкаешься на незатейливые (а иногда и сверхзатейливые) страницы, созданные самыми обычными людьми - пользователями Internet. Сотни тысяч человек стремятся рассказать о себе. И зачастую информация, находящаяся на этих страницах бывает очень интересной и важной.
Поговорим о том, что нужно знать, чтобы в Сети появилась своя собственная страница.
Страницы WWW (Word Wide Web) храняться в виде самых обычных текстовых файлов. Все графические вставки, видео- и звуковые данные записаны в отдельные файлы с использованием соответствующего формата (например, GIF или JPEG). Всё многообразие стилевого и шрифтового оформления страниц WWW достигается с помощью управляющих команд, которые вставляются в соответствующие места текста.
Набор управляющих команд и правил их использования определяется языком разметки гипертекста HTML (Hyper Markup Language), который произошёл от ранее разработанного мощного языка разметки текста SGML (Standart Generalized Markup Language). Следует учесть, что HTML не является языком программирования, а входит в группу языков, которые занимаются классификацией частей документа в соответствии с их назначением. Одни команды определяют положение конкретной части документа на странице, другие - размер и тип шрифта, третьи - связана ли с этой частью какая-либо ссылка на другой документ и так далее.
HTML совершенно не зависит от компьютерных платформ. Неважно, что у тебя за машина: Macintosh или PC, стоит ли Windows 95, MacOs или Linux - правильное отображение документа в окне броузера гарантированно.
Современные средства создания страниц WWW работают в режиме WYSIWYG. Ты редактируешь документ и сразу видишь, как он будет выглядеть при его размещении на сервере WWW. Для создания html-документов достаточно самого примитивного текстового редактора, способного сохранять текст без символов форматирования. Например, Notepad, встроенный в любую версию Windows, или же для более комфортной работы Microsoft Internet Assistant for Microsoft Word.
В своём наиболее общем виде структура документа HTML выглядит следующим образом:
<HTML>
<HEAD>
<TITLE> заголовок </TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
Профессионалы называют их тэгами. Тэги - некий значимый набор символов HTML, единицы разметки, каждая из которых даёт конкретное указание броузеру по поводу той или иной части документа.
Изображённые в примере команды обязательны для любого html -документа. Почти все команды парные. Первая часть пары - тэг начальный, открывающий действие эффекта, который будет интерпретирован броузером в графическом виде. Вторая часть - тэг конечный. Он определяет границу в теле документа, после которой эффект начального тэга уже не имеет силы. Конечный тэг всегда можно опознать по символу "/" - "слэш", стоящему перед ключевым словом.
Теперь рассмотрим, что обозначают эти и другие команды написания html - страниц.
Команды <HTML></HTML> открывают и завершают любую html -cтраничку. Команды <HEAD></HEAD> определяют заголовочную, служебную часть. Команды <TITLE></TITLE> вложены внутрь тэгов <HEAD></HEAD> и представляют заголовок страницы, который будет отображён наверху окна броузера, а также даст имя закладке на память (bookmark), если, конечно,страничка будт настолько интересной, что убедит зашедшего на неё поставить эту закладку. Команды <BODY></BODY> ограничивают содержимое страницы. Информация, которую нужно поместить на страницу, должна находиться между этими двумя командами. Команда <META> предназначена для встаки в документ дополнительной информации о самом документе. Например, информация о программе, с помощью которой был создан документ:
<META NAME="GENERATOR" CONTENT="Internet Assistant for Microsoft Word">
Команда <P> позиционирует обзац. Впрочем, достаточно часто она используется для вставки в страницу пробела, равного по высоте одной строке.
Команды <FONT></FONT> предназначены для определения шрифта, который следует использовать при отображении текстовой ссылки Normal text:
<FONT FACE="Times New Roman">Normal text</FONT>
Дополнительно эта команда позволяет указать другие атрибуты шрифтового форматировния, например высоту букв.
Простейшие текстовые редакторы, такие, как Notepad, Norton Editor или Лексикон для Dos, предполагают, что текст состоит из отдельных строк, каждая из которых завершается специальным символом - символом конца строки. Такой подход вызывает много неудобств при форматировании документа, так как для установки расстояния между параграфами текста нужно вставлять пустые строки, а отступ первой строки и выравнивание столбцов в таблицах приходится делать с помощью символов пробела и табуляции. Современные текстовые процессоры пользуются символом строки по-другому. Вместо того чтобы вставлять этот символ в конец каждой строки текста, они отмечают указанным символом конец параграфа. Таким образом, в текстовых процессорах используется понятие параграфа как текста, состоящего, возможно, из нескольких строк, в конце которого расположен специальный символ.
Удобство такого подхода заключается в том, что при редактировании документа можно легко изменять такие параметры параграфа, как отступы от левой и правой границы листа, отступ для первой строки, расстояние между строками и между параграфами, не заботясь о том, как при этом будут располагаться слова, из которых состоит параграф.
Бывают случаи, когда необходимо сделать переход к другой строке, оставаясь при этом в рамках текущего параграфа. Такой принудительный переход к другой строке можно сделать с помощью команды <BR>:
<P>
Минимальным процессором для недорогих систем является: <BR> Pentiun 166 MMX.
При отображении этот текст будет выглядеть следующим образом:
Минимальным процессором для недорогих систем является:
Pentium 166 MMX
По умолчанию текст в параграфе выравнивается по левой границе окна просмотра. Используя команды HTML, можно выполнить центрирование текста. Центрирование текста выполняется командами <CENTER></CENTER>, которые ограничивают с двух сторон центрируемый текст.
При форматировании страниц WWW часто используется такой приём, как разделение параграфов горизонтальной линией. Она задаётся тэгом <HR>, у которого есть атрибуты, позволяющие регулировать её длину и ширину. Ширина линии задаётся в пикселах, длина - в процентах к размеру окна броузера по ширине. Тэг, выводящий на экран горизонтальную линию шириной в 10 пикселов и длиной 90 % от ширины окна броузера, выглядит так :
<HR SIZE="10" WIDTH="90%">
Любой современный текстовый процессор предоставляет пользователю возможность шрифтового оформления символов. Как правило, можно выбрать для символов любой шрифт, установленный в системе, выбрать высоту символов, выделить символы жирным шрифтом, курсивом или подчёркиванием.
Все команды форматирования символов, определённые в языке HTML, можно разделить на команды логического форматирования и команды физического форматирования.
Команды логического форматирования определяют не конкретный способ оформления, а указывают навигатору тип информации, подлежащий выделению.
Ниже приведён список команд логического форматирования символов с кратким описанием.
|
Команды |
Описание |
|
|
<CITE>,</CITE> |
Цитата |
|
|
<EM>,</EM> |
Текст, имеющий особое значение |
|
|
<STRONG>,</STRONG> |
Сильное выделение текста |
|
|
<KBD>,</KBD> |
Текст, введённый пользователем |
|
|
<CODE>,</CODE> |
Листинг программы |
|
|
<SAMP>,</SAMP> |
Последовательность литералов |
|
|
<VAR>,</VAR> |
Имя переменной |
|
|
<!-- ...--> |
Комментарий |
По возможности следует использовать логическое форматирование символов, так как такое форматирование позволяет самостоятельно выбирать способ оформления указанных логических составляющих текста в состветствии со своим вкусом.
Команды физического форматирования указывают явным образом, как следует оформить символы текста :
|
Команда |
Описание |
|
|
<B>,</B> |
Выделение жирным шрифтом |
|
|
<I>,</I> |
Выделение курсивом |
|
|
<TT>,</TT> |
Оформление шрифтом с фиксированной шириной букв |
|
|
>U>,</U> |
Выделение подчёркиванием |
|
|
<STRIKE>,</STRIKE> |
Выделение перечёркиванием |
|
|
<BIG>,</BIG> |
Текст с крупным размером букв |
|
|
<SMALL>,</SMALL> |
Текст с мелким размером букв |
|
|
<BLINK>,</BLINK> |
Мигающий текст |
|
|
<SUB>,</SUB> |
Подстрочный текст |
|
|
<UP>,</UP> |
Надстрочный текст |
Ещё одна возможность форматирования символов с помощью команды <FONT>, которая задаёт параметры шрифта. Команда <FONT> с параметром <SIZE> определяет размер шрифта. По умолчанию размер шрифта равен трём, что соответствует высоте букв, равной 12 пикселам.
Формат этой команды приведён ниже:
<FONT SIZE=X>
Если нужно изменить базовое значение букв, это можно сделать командой <BASEFONT>, например:
<BASEFONT SIZE=2>
Другой параметр оператора <FONT> - параметр COLOR позволяет задать цвет символов. Формат этого параметра приведн ниже:
<FONT COLOR="#RRGGBB">
Здесь вместо RR, GG и BB следует указать шестнадцатеричные значения соответственно для красной, зелёной и голубой компонентов цвета.
Продолжая аналогию с оформлением обычного текста при помощи текстовых процессоров, рассмотрим так называемое стилевое оформление параграфов.
Стилевым оформлением параграфа, или стилем параграфа, будем называть совокуность параметров оформления, определяющих внешний вид и расположение параграфа. Это такие параметры, как тип и размер шрифта, отступы от левого и правого края документа, тип выравнивания текста в параграфе, межстрочное расстояние и т.д.
В языке HTML определены 6 стилей для оформления заголовков различного уровня. Первы и главный определяется командами <H>,</H1>, последний - командами <H6>,</H6>. Чем выше уровень заголовка, тем более крупный шрифт используется броузером для его отображения.
Ниже приведён список команд стилевого оформления с кратким их описанием.
|
Команда |
Описание |
|
|
<BLOCKQUOTE>,</BLOCKQUOTE> |
Используется для цитирования |
|
|
<DL COMPACT>,</DL> |
Используется для формирования списка терминов и их описания |
|
|
<DT> |
Используется вместе с командами <DL> и <DD> для выделения определяемого термина |
|
|
<DIR>,</DIR> |
Используется для формироания списка |
|
|
<TT>,</TT> |
Текст, оформленный с использованием этой команды, будет отображаться на экране шрифтом с фиксированной шириной символов |
|
|
<DFN>,</DFN> |
Используется для оформления впервые упоминающегося термина |
|
|
<ADDRESS>,</ADDRESS> |
Применяется для оформления авторской подписи под страницей, адресов и т.п. |
Рано или поздно придётся размещать на странице WWW табличны данные. Самый простой, но далеко не самый хороший способ создания таблиц известен со времён текстового редактора Лексикон: оформляется таблица шрифтом с фиксированной шириной букв, а для выравнивания колонок используются символы пробела или табуляции.
Аналогичным образом можно поступить и при размещении таблиц на странице WWW, однако лучше сделать это средствами языка HTML.
Воспользовавшись редактором Microsofe Internet Assistant for Microsoft Word с помощью мыши можно легко создать таблицу, а затем с помощью клавиатуры заполнить ячейки этой таблицы.
В документе таблица определяется между командами <TABLE>,</TABLE>. Каждая строка таблицы ограничена командами <TR> и</TR>. Столбцы ограничены командами <TD> и </TD>, причём у команды <TD> есть параметр - ширина столбца. При необходимости можно создать таблицу с видимой рамкой, разделяющей строки и столбцы. Для этого в команде <TABLE> необходимо указать параметр BORDER, определяющий ширину рамки:
<TABLE BORDER ="1">
При необходимости можно задать цвет рамки, указав параметр BORDERCOLOR, как это показано ниже:
<TABLE BORDER="4" BORDERCOLOR="#0000FF">
В языке HTML определено 4 специальных символа, предназначенных для служебных целей (например, для вставки команд или символьных объектов). Это символы <, >, & и ". При необходимости можно вставить в документ HTML байт с произвольным шестнадцатиричным кодом. Для этого надо включить в текст последовательность символов вида &#XX, где ХХ - шестнадцатиричное число в диапазоне от 0 до FF.
Серверы WWW получили широкое распространение не в последнюю очередь за счёт возможности размещения на страницах WWW графических изображений. Размещать на странице графическое изображение следует небольшого размера, и лучше сделать ссылку, применяя которую пользователь при необходимости сможет просмотреть полноформатное изображение.
Для вставки графического изображения в документ HTML можно воспользоваться командой <IMG>, как это показано ниже:
<IMG SRG="serg.jpg" ALT="Mouse">
Параметр SRG задаёт источник изображения,то есть путь к месту, где находится графический файл с рисунком.Параметр ALT задаёт текст, который отображается вместо графического изображения, если возможность вывода графики отсутствует или отключена, если файл изображения ещё не успел загрузиться на локальный диск пользователя.
Для использования сегментированной графики используются параметры USEMAP и ISMAP. Сегментированное графическое изображение - это специальным образом подготвленное битовое изображение, в котором при помощи специальных программ определены "чувствительные точки". Обычно сегментированную графику используют для создания графический инструментальных линеек с кнопками.
Наиболее впечатляющая возможность технологии WWW - возможность размещения на страницах мультимедийной информации, и в частности видеофрагментов со звуковым сопровождением или "немого кино".
Для того чтобы разместить видеофрагмент на странице WWW, неоходимо подготовить файл в формате Microsoft Video for Windows (файл AVI), содержащий видеофрагмент.
Для вставки видеофрагмента можно использовать описанную выше команду <IMG> с параметрами DYBSRC, START, CONTROLS и несколько других:
<IMG DYNSRC="video.avi" START="FILEOPEN" CONTROLS>
В данном случае при загрузке страницы автоматически начинается проигрывание файла video.avi, причём окно снабжается органами управления в виде кнопки запуска/остановки проигрывания и движкового регулятора, позволяющего перемещаться в произвольное место видеофрагмента.Ниже приведён список параметров, которые используются для встаки видеофрагментов с кратким описанием:
|
Параметр |
Описание |
|
|
DYNSRC |
Этот параметр определяет путь к файлу, содержащему видеофрагмент. |
|
|
START |
Параметр определяет момент, когда нужно начинать проигрование видеофрагмента, Если этот параметр имеет значение FILEOPEN, проигрывание начинается сразу, как только файл был загружен. |
|
|
CONTROLS |
Если указан этот параметр, под окном с видеофрагментом отображаются органы управления. |
|
|
LOOP |
Определяет, сколько раз будет проигрываться видеофрагмент. |
|
|
LOOPDELAY |
С помощью этого параметра можно задать задержку в милисекундах перед началом очередной операции проигрывания видеофрагмента. |
При оформлении фона страниц WWW часто используют небольшое графическое изображение, которое будет заполнять собой фон страницы. Для того, чтобы указать путь к файлу, содержащему фон страницы, к команде <BODY> добавить параметр BACKGROUND, как это показано ниже:
<BODY BACKGROUND="Bkg.jpg">
Для команды <BODY> можно указать и другие параметры, некоторые из них приведены ниже:
|
Параметр |
Описание |
|
|
BGCOLOR |
Задаёт цвет фона страницы. |
|
|
TEXT |
Задаёт цвет основного текста. |
|
|
LINK |
Задаёт цвет текста ссылки на другую станицу. |
|
|
VLINK |
Задаёт цвет текста ссылки на страницу, которую вы уже посетили. |
|
|
ALINK |
Задаёт цвет текста активных ссылок. |
Возможность вставки гипертекстовых ссылок обеспечивают переход от просмотра одной страницы WWW к просмотру другой страницы или другого места той же самой страницы.
Ссылка создаётся с помощью пары команд <A> и </A>. Между этими командами располагается текст ссылки, который отображается в окне просмотра и выделяется подчёркиванием, а также изменением цвета. Пример гипертекстовой ссылки приведён ниже:
<A HREF="http://www.altavista.com/html/Mouse.HTM">Альтавист</A>
Если подвести курсор мышки к слову "Альтавист", этот адрес появиться в информационной строке внизу экрана.
Для того чтобы вставить в документ закладку, можно воспользоваться парой команд <A>,</A>, указав в команде <A> параметр NAME - имя закладки:
<A NAME="#BOOKMARK">BM</A>
Документы HTML могут содержать также ссылки на такие ресурсы сети Internet, как электронные почтовые адреса, серверы FTP, электронные конференции и т.п.
Всё шире в сети Internet распространяется наиболее современная технология виртуальной реальности.Используя специальный язык виртуальной реальности VRML и специальные инструментальные средства, можно создавать, например, виртуальные здания, состоящие из многих этажей и комнат.
Развитие сети Internet и технологии WWW в настоящее время находятся на стадии взрыва, поэтому каждый месяц появляются всё новые средства разработки приложений Internet вообще и страниц WWW в частности. Помимо этого, постоянно развивается язык разметки страниц HTML, поэтому к настоящему моменту нет никакого стандартного описания для этого языка.
Используемая литература:
1. А.В. Фролов, Г.В. Фролов "Глобальные компьютерные сети"; М."Диалог-Мифи", 1996 г.
2. Журналы HARD'&'SOFT.
Подобные документы
Общая характеристика языка разметки гипертекста Hypertext Markup Language. Структура HTML-документа. Обзор основных возможностей HTML. Элементы современного дизайна Web-страниц. Анализ практического применения HTML (на примере обучающих программ).
курсовая работа [47,9 K], добавлен 24.11.2012Основы языка программирования Web-страниц – HTML. Виды информации, которую может содержать Web-страница: текст, графика, звук, анимация и видео. Инструментарий для создания Web-страниц. Основные HTML-редакторы, которые используются для Web-дизайна.
реферат [374,0 K], добавлен 19.01.2011HTML - это язык, принятый в World Wide Web для создания и публикации веб-страниц. Общие сведения о создании веб-страниц, особенности их оформления. PHP как язык программирования с динамической типизацией, история его создания и возможности использования.
доклад [18,9 K], добавлен 27.12.2010Термин HTML (HiperText Markup Language) и его реализация. Программы просмотра страниц написанных на зыке манипулирования гипертекстами. Характеристика специальных программ – браузеров: Google Chrome, Opera, Mozilla Firefox. Структура HTML-страницы.
контрольная работа [118,8 K], добавлен 05.04.2015Характеристика принципов создания html-страниц и связывания их ссылками так, чтобы можно было произвольным образом переходить от одной страницы к другой. Применение тегов форматирования текста и заголовка окна. Этапы создания html-страницы с таблицей.
контрольная работа [16,0 K], добавлен 19.06.2014Значение атрибута TITLE тега HTML-документа. Возможности HTML для разработчиков Web-страниц. Параметры тега
, регулирующие отступы вокруг изображения. Оформление комментариев в CSS. Теги логического форматирования текста (phrase elements).
тест [19,9 K], добавлен 11.10.2012Основные теги и атрибуты языка HTML. Создание web-сайта, который должен представлять собой несколько связанных между собой страниц. Рассмотрение различных значений атрибутов и тегов на страницах и в других документах. Экранные формы разработанных страниц.
лабораторная работа [1,2 M], добавлен 16.04.2014Язык разметки гипертекстовых страниц HTML. Обеспечение доступности Web-страницы, представление текста и графики. Основные правила и этапы создания сайта, выбор структуры страницы. Оценка экономической целесообразности использования HTML-редакторов.
дипломная работа [86,7 K], добавлен 25.03.2013Личная подборка Internet-ресурсов учебного назначения. Язык гипертекстовой разметки страниц HTML. Текстовое оформление страниц. Вставка изображений. Нумерованные, маркированные списки. Оформление таблиц. Создание фреймов. Границы и рамки. Стили CSS.
лабораторная работа [177,3 K], добавлен 23.06.2013Специальные разметочные указатели (теги) языка HTML. Основные правила написания тегов. Структура HTML-файлов. Внесение изменений и способы обновления Web-сайта. Необходимые атрибуты для создания на Web-странице бегущей строки и вставки рисунков.
презентация [439,3 K], добавлен 29.01.2014
