Цель работы: Изучить основы языка HTML. Создать домашнюю страницу.
Базовые сведения:
Немного истории. Всемирная информационная сеть (World Wide Web далее Web) имеет недолгую, по людским меркам, историю. Годом рождения Web считается 1992 год, а отцом основателем был некто Tim Berners-Lee, который сумел, используя новые сетевые технологии и опыт своих предшественников, сделать Web приятным и удобным средством распространения информации во всемирной сети компьютерных сетей Internet (Internet существует с середины 60-х годов).
Толчок для своего стремительного и победного шествия по планете Web получила в 1993 году, когда Mark Andressen с группой студентов университета Иллинойса, разработали бесплатно распространяемую (вот истинная причина бурного развития Web) программу Mosaic для просмотра Web-страниц.
HTML был разработан на основе мощного языка разметки SGML, путем переноса
некоторых его функций разметки данных в сетевую среду для разметки гипертекста.
Одновременно с развитием Web технологий, насыщением Web новыми сервисами и
возможностями, развивался и язык разметки гипертекста. С момента своего
появле-ния стандарт HTML претерпел множество изменений, последнее из которых
это спецификация HTML 4.01, анонсированная консорциумом W3C 24 декабря
Суть и составные части Web технологии.
Выделим базовые элементы технологии Web:
Основы языка разметки гипертекста - HTML.
Базовым элементом языка разметки гипертекста является - ТЕГ (дескриптор,
маркер). Тег всегда заключен между скобками < > и имеет следующий вид:
<ТЕГ параметр1="ЗНАЧЕНИЕ" ... параметрN=``ЗНАЧЕНИЕ''>
Теги бывают одиночными и контейнерными. Контейнером называется пара: открывающий <ТЕГ> и закрывающий </ТЕГ>.
<ТЕГ> Содержимое контейнера </ТЕГ>
Открывающий тег служит для указания программе-броузеру начала какого-либо объекта или задания свойств объектов помещенных в контейнер. Закрывающий тег служит для указания программе-броузеру о конце объекта или окончания применения свойств, заданных в открывающем теге. Параметры(атрибуты) тега задают значения свойств данного объекта или объектов помещенных в контейнер. Значения свойств, содержащие пробелы, берутся в кавычки, в остальных случаях кавычки можно опустить.
HTML документ представляет собой обычный текстовый файл, содержащий маркированный тегами форматирования текст, а так же заданные специальными тегами ссылки на графические и прочие файлы мультимедиа, ссылки на другие доку-менты HTML и ресурсы Internet.
Документ HTML начинается открывающим тегом <HTML> и заканчивается за-крывающим тегом </HTML>. Между данной парой контейнерных тегов располагаются две другие основные части HTML документа: заголовок заключенный в контейнер <HEAD>...</HEAD> и тело документа в контейнере <BODY>...</BODY>. Таким образом структура простого HTML документа выглядит примерно так:
Структура HTML-документа
<! DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 3.2 // EN" >
<HTML>
<HEAD> Заголовок документа </HEAD>
<BODY> Тело документа </BODY>
</HTML>
Объявление <!DOCTYPE>.
Элемент <!DOCTYPE> должен первым указываться в документе HTML
(теоретически). Он сообщает серверу WEB способ обработки документа и то, какие
дескрипторы могут находиться на странице, хотя чаще всего он игнорируется
браузерами. Поэтому его применение строго не обязательно.
Синтаксис: <!DOCTYPE HTML "текст""URL">
Здесь текст определяет версию HTML , а URL позволяет браузерам пользователей
загрузить DTD например:
<! DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.0 // EN"
"http://WWW.W3.ORG/TR/REC-HTML40/strict.dtd">
Тэг <HTML>.
Тэг <HTML> определяет границы документа HTML, ему соответствует конечный
тэг </HTML>. Между этими двумя тэгами располагается собственно весь
документ. Как и <!DOCTYPE> тэги <HTML> и </HTML> - не
являются строго обязательными. Но, все-таки, их использование является
правилами хорошего тона т.к. браузеры у пользователей могут быть всякие и не
известно - насколько корректно они визуализируют такой код.
В дополнение к обязательной структуре настоятельно рекомендуется вставлять различные структурные детали.
Каждый HTML документ должен содержать основную информацию о его происхождении.
Если Вы стремитесь к тому, чтобы люди отыскали Ваш документ по соответствующим связям, важность предоставления информации о его происхождении становится очевидной. Когда пользователь найдет Ваш документ с помощью, например, поискового ресурса AltaVista, он, вероятнее всего, захочет узнать, к какому виду относится документ. Поэтому каждый файл HTML должен предоставлять самую основную информацию (или связи к информации) о его происхождении и природе. Например, в собрании книгоподобных документов, разделенных на малые файлы, каждый файл должен содержать, по крайней мере, связь к "первой странице" "книги" (home page).
О происхождении документа должна быть представлена, по крайней мере, следующая информация:
Автор документа, имеющий уникальное имя. При этом должна быть задана связь с домашней страницей автора. Если у документа несколько авторов, определите их всех, а также роль каждого из них; например, ведущего автора, редактора, действующего спонсора, а также лиц, формально отвечающих за документ. Дата создания документа или его последней модификации, или и та и другая. Представляемая дата должна быть понятна во всем мире; в частности, название месяца лучше писать словом, а не цифрой. Контекст документа и его статус, например: часть официальной документации компании об одном из ее продуктов, или часть личной информации о хобби автора, или что-то другое. Адрес (URL) документа. Такая информация зачастую чрезмерна, однако она может быть очень полез-ной, когда кому-то нужна копия именно того документа, который он нашел. Лучше не полагаться на броузер (и пользователя), добавляющих такую информацию, когда сделана копия документа.
Элемент <BODY>.
Элемент <BODY> предназначается для выделения той части документа, которая
будет визуализирована для пользователя. Он имеет как начальный, так и конечный
теги. Начальный тег <BODY> может иметь несколько атрибутов .
Вложенные атрибуты элемента <BODY>:
Заголовочные тэги.
Элемент <HEAD> </HEAD> определяет заголовок документа.
BASE - базовый, основной URL Цель Задание базового URL для относительных URL в документе (например, в атрибутах HREF элемента A). Этот элемент часто используется для отображения документов. Например: <BASE href="http://foo.com/index.html">.
Элемент BASE непосредственно не отображается в документе. Основной синтаксис <BASE HREF="URL">. Так как в документе допускается только один элемент BASE, Вы не можете иметь различные базовые URL в различных частях файла HTML. При отсутствии элемента BASE в документе URL самого документа становится базовым в пределах документа.
META - метаинформация.
Используется для задания метаинформации (информации о документе), т.е. пар
имя/значение, описывающих свойства документа, например, авторство, истечение
даты, список ключевых слов и т.д. Типичное отображение Элементы META не влияют
на отображение самого документа. Они могут давать некоторый эффект при
представлении информации о документе, например, в верхнем окне броузера или в
ответе на запрос от поискового средства.
Cинтаксис
<META NAME=имя элемента метаинформации CONTENT=содержимое информации> или
<META HTTP-EQUIV=имя элемента метаинформации CONTENT=содержимое
информации>.
Примеры <META
NAME=DESCRIPTION CONTENT= "An extensive guide to writing HTML 3.2
documents, with ../../examples and practical advice.">
<META NAME=KEYWORDS
CONTENT= "structural HTML, logical markup">.
Тег META влияет на индексирование документа, когда он включается в базу данных поискового сервера.
TITLE - "внешний" заголовок (титул).
Используется для задания обязательного "внешнего" заголовка
документа.
Титул может выводиться в окне заголовка программы просмотра; в списке результатов поиска, возвращаемых поисковым сервером; в горячем списке, определяемом пользовате-лем; списке истории и т.д.
Основной синтаксис <TITLE>последовательность символов</TITLE>
В TITLE можно использовать escape последовательности, например, < (для <) и ä (для д), но никакие теги HTML не разрешены, поэтому Вы не можете задавать в заголовке размеры шрифтов или выделения.
Примеры <TITLE>A study of population dynamics</TITLE> Примечания Написать хорошее заглавие - очень важно, так как списки результатов поиска, возвращаемые поисковым сервером, могут использовать его.
Комментарии
Файл HTML может содержать комментарии, дающие пояснения для человека, читающего HTML код. Комментарии не влияют каким-либо образом на представление документа, т.е. они игнорируются бро-узером. Вы можете начать комментарии с четырехсимвольной последовательности <!- (знак "меньше чем", восклицательный знак, два дефиса) и завершить его трехсимвольной последовательностью -> (два де-фиса, знак "больше чем"). Например: <!- Написано Иваном Ивановым ->.
Оформление текста
Элемент <EM> Элемент <EM> используется с целью выделения особым шрифтом слова или текста. Синтаксис: <EM> Текст </EM>
Элемент <CODE> Элемент <CODE> используется с целью дополнительного выделения фрагментов программного кода. По умолчанию он отображается телетайпным шрифтом. Данный элемент предпочтительнее, чем элемент <TT> (телетайпный шрифт). Поскольку расположение пробелов существенно для чтения программного кода, элемент <CODE> целесообразно употреблять в сочетании с элементом <PRE>. Синтаксис: <CODE> листинг кода </CODE>
Элемент <DFN> Элемент <DFN> используется с целью обозначения терминов и определений по типу словарей или глоссариев. Синтаксис: <DFN> Текст </DFN>
Элемент <CITE> Элемент <CITE> используется с целью обозначения источника информации ,из которого взята цитата. Синтаксис: <CITE> Текст </CITE>
Элемент <STRONG> Элемент <STRONG> используется с целью выделения особым шрифтом слова или текста. Синтаксис: <STRONG> Текст </STRONG>
Элемент <I> Элемент <I> используется с целью выделения курсивным шрифтом слова или текста. Синтаксис: <I> Текст </I>
Элемент <B> Элемент <B> используется с целью выделения полужирным шрифтом слова или текста. Синтаксис: <B> Текст </B>
Элемент <U> Элемент <U> используется с целью выделения подчеркиванием слова или текста. Синтаксис: <U> Текст </U>
Элемент <SUP> Элемент <SUP> используется с целью выделения надстрочных слова или текста. Синтаксис: <SUP> Текст </SUP>
Элемент <SUB> Элемент <SUB> используется с целью выделения подстрочных слова или текста. Синтаксис: <SUB> Текст </SUB>
Элемент <BIG> Элемент <BIG> используется с целью выделения крупным шрифтом слова или текста относительно ос-новного текста. Синтаксис: <BIG> Текст </BIG>
Элемент <SMALL> Элемент <SMALL> используется с целью выделения мелким шрифтом слова или текста относительно основного текста. Синтаксис: <SMALL> Текст </SMALL>
Элемент <FONT> Элемент <FONT> используется с целью изменения выделения шрифтом слова или текста. С ним приме-няются два атрибута size и coloR. Некоторые браузеры поддерживают атрибут face, позволяющий задать любой из перечня шрифтов, если браузер не находит заданный шрифт - то используется шрифт, заданный по умолчанию. Синтаксис: <FONT size=n color="цвет">Текст </FONT> или <FONT face="имя" color="цвет">Текст </FONT>
Элемент <BASEFONT> Элемент <BASEFONT> используется как альтернатива атрибуту size элемента <FONT>, он позволяет задать базовый размер шрифта во всем документе и не имеет конечного тега. По умолчанию значение его задается равным 3 ,значение size может выражаться так же и относительным размером, например, размер -1 означает размер на один меньший, чем по умолчанию. Синтаксис: <BASEFONT size=n>
Шесть уровней заголовков <Hn> Соответствующие каждому уровню гарнитура и размер шрифта зависят от браузера, стилю <H1> на-значается самый большой и самый жирный шрифт, а стилю <H6> назначается самый маленький и са-мый невзрачный шрифт. Элемент может иметь атрибут align, который указывает отступ left, centeR или Right. Синтаксис: <Hn align=отступ> Текст заголовка </Hn>
Разделительные линии <HR> Элемент <HR>
используется для проведения горизонтальной черты в документе, он может иметь
атри-буты : coloR, задающий цвет линии, size высота в пикселах Width ширина в
пикселях или процентах от ширины экрана, align режим выравнивания, и не имеет
конечного тега. Синтаксис:
<HR align="centeR" size=n Width=n coloR="цвет">
Элемент <P> Этот элемент задает один из способов разбиения текста на абзацы. Он может иметь вложенный атрибут align, который указывает отступ left, center, right, justify. Каждый следующий абзац игнорирует, заданное для предыдущего абзаца значение align. Синтаксис: <P align=отступ> Текст абзаца </P>
Элемент <BR> Этот элемент задает разрыв текста с переходом на новую строку. Он может иметь вложенный атрибут cleaR, который может принимать значения left, all или Right тем самым указывать обтекание текста во-круг плавающих изображений вставленных в текст нестандартным способом. Каждый следующий аб-зац игнорирует, заданное для предыдущего абзаца значение cleaR. Синтаксис: <BR cleaR=обтекание> Текст Может быть отменен тэгами <NOBR> и </NOBR>
Элемент <PRE> Весь текст, заключенный в тэги <PRE> и </PRE> будет визуализирован браузером точно так, как он визуализирован в исходном коде документа, кроме того текст выводится моноширинным шрифтом, что значительно упрощает задачу форматирования текста в колонки. Элемент поддерживается не всеми браузерами, он может иметь атрибут Width, который задает ширину отводимого пространства под текст в символах. Элемент сменил собой устаревшие элементы <XMP>, <LISTING> и <PLAINTEXT> Синтаксис: <PRE Width=число символов >...текст.. .</PRE>
Элемент <DIV> Элемент <DIV> позволяет выделить в структуре документа несколько разделов. Он является блочным элементом, функционирующим во многом подобно элементу <P>. Если закрывающий тэг </P> опущен, то <DIV> эффективно заменяет его и начинает новый абзац. Он может иметь атрибут align, который указывает отступ left, centeR или Right. Каждый следующий раздел игнорирует, заданное для предыду-щего раздела, значение align. Синтаксис: <DIV align=отступ> Текст раздела </DIV>
Элемент <ADDRESS> Элемент <ADDRESS> используется для оформления контактной информации текущего документа, будь то адрес электронной почты или полный почтовый адрес с номером телефона. Синтаксис: < ADDRESS>контактная информация </ADDRESS>
Элемент <BLOCKQUOTE> Элемент <BLOCKQUOTE> позволяет выделить обьемный текст-цитату из общего текста. Синтаксис: <BLOCKQUOTE> Текст </BLOCKQUOTE>
Списки
Элемент <OL> используется с целью задания нумерованных
списков, имеет атрибуты type=1, или A, или a, или I, или i для задания вида
нумерации и staRt для указания, с какого индекса начинается нумерация списка.
Элемент <OL> включает в себя дополнительный элемент <LI>, который
задает элементы списка. Синтаксис: <OL type=1 start=1 > <LI>
элемент списка <LI> элемент списка </OL>
Пример:
1. элемент списка
2. элемент списка
Элемент <UL>, по сути, является аналогом <OL> без
дополнительных элементов <LI>, он используется с целью задания
ненумерованых списков, имеет атрибут type=ciRcle,squaRe, или disc для задания
вида маркера. Элемент <UL> включает в себя дополнительный элемент
<LI>, который задает элементы списка. Синтаксис: <UL type=circle >
<LI> элемент списка <LI> элемент списка </UL>
Пример:
o элемент списка
o элемент списка
Элемент <DL> используется с целью задания словарей,
глоссариев и прочих перечней. Элемент <DL> включает в себя дополнительные
элементы <DT> и <DD>, которые обозначают соответственно термин и
определение. Синтаксис: <DL > <DT> термин 1 <DD>определение 1
<DT> термин 2 <DD>определение 2 </DL>
Пример:
термин 1 определение 1
термин 2 определение 2
Задание на лабораторную работу
Создание домашней страницы содержащей информацию о студенте.
Обязательное содержание:
В оформлении страницы следует использовать максимальное количество вышеперечисленных тегов HTML.
Люди обмениваются визитными карточками. В виртуальном мире визитная карточка - ваша домашняя страничка. Как и визитки, личные сайты встречаютс простые в оформлении, довольно вычурные.
Главное, чтобы оформление и содержание соответствовало цели, для которой ваш Home page появился на сетевых просторах.
Фирмы заводят себе сайты в Интернете, чтобы найти новых клиентов и рассказать о своем товаре. Через Интернет люди могут рекламировать и себя, то есть рассказывать потенциальному работодателю, какой вы замечательный.
Например, Артемий Лебедев, вебмастер, работы которого во многом определяют внешний вид всего русскоязычног Интернета (Рунета), поместил на свою домашнюю страничку (http://www.tema.ru/) длинный список сайтов, которые он оформлял, и прикольные графические работы.
"Некто" напишет, какой он замечательный физик, бухгалтер, переводчик или врач. Когда человек хочет найти новых друзей, единомышленников, он рассказывает о своем увлечении. При этом он не забудет поместить ссылку на свой e-mail или гостевую книгу, чтобы посетители могли оставить сообщение, комментарии. О чем бы ни была домашняя страница нельзя указывать ваш адрес, телефон, подробности биографии.
Использована информация с сайта http://www.tspu.tula.ru/ivt/old_site/umr/trpo/node98.html