Команды html и основные принципы построения web-страниц
Понятие об html. Структура файла в формате html. Создание документов в стандарте html. Установление цвета фона и текста, создание заголовков. Графика и ссылка на web-странице, вставка рисунков. Оформление таблиц, форматирование текста и изменение стилей.
| Рубрика | Программирование, компьютеры и кибернетика |
| Вид | контрольная работа |
| Язык | русский |
| Дата добавления | 28.01.2010 |
| Размер файла | 18,0 K |
Отправить свою хорошую работу в базу знаний просто. Используйте форму, расположенную ниже
Студенты, аспиранты, молодые ученые, использующие базу знаний в своей учебе и работе, будут вам очень благодарны.
Содержание
Введение
Команды HTML и основные принципы построения страниц WWW
Список литературы
Введение
Бродя по паутине, частенько натыкаешься на незатейливые (а иногда и сверхзатейливые) страницы, созданные самыми обычными людьми - пользователями Internet. Сотни тысяч человек стремятся рассказать о себе. И зачастую информация, находящаяся на этих страницах бывает очень интересной и важной.
Поговорим о том, что нужно знать, чтобы в Сети появилась своя собственная страница.
Команды HTML и основные принципы построения страниц WWW
Страницы 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. Гордеев А.В. Операционные системы. - М.: Планета, 2004.
2. Олифер Н.А., Олифер В.Г. Сетевые операционные системы. - М.: Дело и сервис, 2006.
3. Фролов А.В., Фролов Г.В. Глобальные компьютерные сети. - М.: Диалог-Мифи, 2006.
Подобные документы
Понятие об html. Структура файла в формате html. Отличительный признак html-документа. Гипертекстовые ссылки. Создание документов в стандарте html. Заголовки. Форматирование текста и изменение стилей. Фреймы.
реферат [23,7 K], добавлен 17.08.2007Характеристика принципов создания html-страниц и связывания их ссылками так, чтобы можно было произвольным образом переходить от одной страницы к другой. Применение тегов форматирования текста и заголовка окна. Этапы создания html-страницы с таблицей.
контрольная работа [16,0 K], добавлен 19.06.2014Создание Web-документов (от простейших статических до документов на основе динамического HTML): форматирование текста, создание списков, таблиц, встраивание различных объектов, использование средств интерактивного общения с пользователем.
методичка [45,5 K], добавлен 27.10.2010Создание сайта при помощи HTML и CSS. Язык гипертекстовой разметки HTML и таблица стилей CSS. Основные понятия об этих языках, этапы и алгоритмы программного обеспечения. Добавление стилей в документ. Свойства элементов, принцип построения Web-страницы.
курсовая работа [2,9 M], добавлен 12.01.2016Работа с HTML-редактором Adobe Dreamweaver. Этапы и правила построения заглавной страницы сайта, форматирования HTML-страниц, создания гипертекстовых ссылок, создания и форматирования таблиц. Использование графических материалов при разработке сайта.
методичка [1,9 M], добавлен 06.07.2011История развития Интернета и принципы его работы. Сквозные протоколы и шлюзы. Логическая и физическая структура сайта. Основы HTML и форматирование текста. Списки, таблицы, гиперссылки. Мультимедиа на web–странице. Формат задания фреймовой структуры.
курсовая работа [1,2 M], добавлен 27.03.2009Форматирование текста с помощью HTML. Задание цвета на веб-странице. Задание размера шрифта. Физическое и логическое форматирование символов. Вставка специальных символов. Удобочитаемость, содержание и форма шрифта. Подбор шрифта и верстка текста.
курсовая работа [1,3 M], добавлен 01.10.2014Особенности программирования на языке HTML и JavaScript. Основные стили форматирования текста. Анализ основных приемов и методов создания страниц, рисунков, таблиц и гиперссылок. Основные цвета и их коды. Разработка собственного сайта и его презентация.
курсовая работа [61,3 K], добавлен 29.01.2016Цель и место размещения документа Web. Язык гипертекстовой разметки. Сценарий и структура Web-документа. Основные редакторы гипертекста. Создание документов в стандарте HTML. Создание заголовков, форматирование и изменение стиля, нумерация списков.
реферат [34,4 K], добавлен 22.11.2009Разработки британского учёного Тима Бернерсом-Ли. HTML как язык для обмена научной и технической документацией, пригодный для использования людьми, не являющимися специалистами в области вёрстки. Структура HTML-документов и основные теги на языке HTML.
курсовая работа [820,3 K], добавлен 03.03.2011
