Logo Море(!) аналитической информации!
IT-консалтинг Software Engineering Программирование СУБД Безопасность Internet Сети Операционные системы Hardware
VPS в 21 локации

От 104 рублей в месяц

Безлимитный трафик. Защита от ДДоС.

🔥 VPS до 5.7 ГГц под любые задачи с AntiDDoS в 7 локациях

💸 Гифткод CITFORUM (250р на баланс) и попробуйте уже сейчас!

🛒 Скидка 15% на первый платеж (в течение 24ч)

Скидка до 20% на услуги дата-центра. Аренда серверной стойки. Colocation от 1U!

Миграция в облако #SotelCloud. Виртуальный сервер в облаке. Выбрать конфигурацию на сайте!

Виртуальная АТС для вашего бизнеса. Приветственные бонусы для новых клиентов!

Виртуальные VPS серверы в РФ и ЕС

Dedicated серверы в РФ и ЕС

По промокоду CITFORUM скидка 30% на заказ VPS\VDS

Практические занятия

Занятие 1

Подготовка и редактирование страниц гипертекста

Язык гипертекстовой разметки HTML

Общие сведения

Среди общедоступных средств Internet для предоставления информации система WWW занимает особое место.

Система WWW была разработана несколько лет назад в одном из крупнейших европейских центров ядерных исследований CERN (EuropeanCenterforNuclearResearch, Швейцария), и предназначена для объединения документов и файлов по всей сети Internet с помощью гипертекстовых связей.

Язык гипертекстовой маркировки HTML является одним из составных компонентов WWW. Он был основан на стандарте ISO 8879-1986 SGML.

HTML позволяет определять структуру электронного документа с полиграфическим уровнем оформления; результирующий документ может содержать самые разнообразные элементы: иллюстрации, аудио- и видео- фрагменты и так далее. Язык включает в свой состав развитые средства для специфицирования нескольких уровней заголовков, шрифтовых выделений, различных групп объектов, например, словари, каталоги или меню для размещения иллюстраций и других фрагментов, а также множество других возможностей.

В основу гипертекстовой разметки была положена теговая модель описания документа, позволяющая представить документ в виде совокупности элементов, каждый из которых окружен тегом (управляющим HTML-кодом). По своему значению теги близки к понятию операторных скобок begin/end в универсальных языках программирования и задают области действия имен локальных переменных, определяют область действия правил интерпретации текстовых элементов документа и т.п.

Документ HTML представляет собой не что иное, как обычный ASCII-файл, с добавленными в него управляющими HTML-кодами (тегами). Каждый тег начинается с левой угловой скобки "<" и заканчивается правой угловой скобкой ">" . Между скобками записывается идентификатор тега и, если необходимо, дополнительные аргументы. Все теги по их назначению и области действия можно разделить на пять основных групп:

  • общего назначения;
  • определения структуры текста;
  • определения атрибутов текста;
  • навигации и гипертекстовых ссылок;
  • задания специальных эффектов и форматов данных.

Некоторые теги используются вместе с закрывающей парой, которая сигнализирует об окончании области действия соответствующего назначения. Закрывающая пара после левой угловой скобки содержит символ "/" (например, для тега наклонного шрифта <I> закрывающая пара представляет собой </I>, для тега заголовка <TITLE> закрывающей парой будет </TITLE>).

Иногда тег с закрывающей парой называют контейнером в том смысле, что внутри него можно поместить содержательную информацию определенного характера. Структура HTML-документа позволяет использовать вложенные друг в друга контейнеры.

Работу с документами, выполненными в соответствии с соглашениями языка HTML, осуществляют специальные программы клиента WWW - так называемые броузеры (WWWBrowser).

Базовая структура HTML-страницы

HTML-файлы всегда начинаются с тега <HTML> , который указывается в начале файла. Этот тег сообщает считывающему файл броузеру, что он имеет дело с HTML-файлом. Последней строкой в документе должна быть закрывающая пара </HTML> , которую можно интерпретировать как "конец HTML-страницы". Таким образом, каждая HTML-страница должна содержать строки

<HTML>
</HTML>

Следующие теги разделяют документ на две секции: голову и тело. Для определения головы добавляется тег <HEAD> с закрывающей парой </HEAD>. С учетом этого HTML-страница принимает вид:

<HTML>
<HEAD>
</HEAD>
</HTML>

В секции тела вводится текст и все то, что фактически должно появится на HTML-странице. Для определения тела применяется тег <BODY> с закрывающей парой </BODY>, помещаемые после тегов головы:

<HTML>
<HEAD>
</HEAD>
<BODY>
</BODY>
</HTML>

Заглавие HTML-страницы

Заглавие показывает общий смысл HTML-страницы, его не следует путать с именем файла. При просмотре HTML-страницы в графическом броузере (например, NetscapeNavigator) заглавие появляется в полоске заголовка окна броузера. Для определения заглавия HTML-страницы применяется тег <TITLE> с закрывающей парой </TITLE> .

Заглавие всегда помещается в секцию головы. Например, чтобы назвать страницу Моя любимая страница, нужно создать следующий HTML-текст:

<HTML>
<HEAD>
<TITLE>Моя любимая страница</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>

Определение текстовых атрибутов и заголовков

Для придания большей выразительности HTML-страницам применяются следующие теги и их закрывающие пары:

  • для использования жирного (bold) написания <B> и </B>
  • для использования курсива (italic) <I> и </I>
  • для использования режима (underline) подчеркивания <U> и </U>
  • для использования текста с выделением <EMP> и </EMP>
  • для сильного выделения текста <STRONG> и </STRONG>

В текст HTML-страницы могут быть добавлены заголовки и подзаголовки (с уровнем вложенности до шести). Для этого применяются теги <H1>, <H2>, <H3>, <H4>, <H5>, <H6> с соответствующими закрывающими парами </H1>, </H2>, </H3>, </H4>, </H5>, </H6>.

Навигация и гипертекстовые ссылки

Структура WWW-сети задается гипертекстовыми ссылками. Гипертекстовая ссылка - это адрес другого HTML-документа или информационного ресурса Internet который тематически, логически или каким-либо другим способом связан с документом, в котором эта ссылка определена.

Для записи гипертекстовых ссылок в WWW-сети была разработана специальная форма UniverseResourceLocator (URL).

Эта форма представляет собой запись следующего вида:

access://host.somewhere.dom:port/apath/other/doc#anchorname

где

access - спецификация протокола, например, http, gopher, file, mailto, news и др.;
host.somewhere.dom - имя хоста;
:port - номер порта (необязательно);
/apath/other/doc - полный путь к объекту на указанном хосте;
#anchorname - наименование гипертекстовой связи (необязательно).

Для задания связи HTML-документа с различными сетевыми ресурсами и документами используется тег <A> и его закрывающая пара </A>. У данного тега есть несколько атрибутов, основным из которых является атрибут HREF , указывающий местонахождение сетевого ресурса и специфицирующий коммуникационный протокол (значение этого атрибута фактически представляет собой URL).

Примеры гипертекстовых ссылок:

<AHREF=http://home.netscape.com:/disk1/smith/docs/first.doc> Clickhere</A>
<AHREF=file:///c /disk1/smith/docs/picture.gif >Clickhere</A>

При этом фраза Clickhere будет особым образом выделена броузером при просмотре HTML-страницы (будет подчеркнута и выделена другим цветом). Обратите внимание на правила записи пути к файлу (все слэши прямые, а не обратные, и диск от директории отделен не двоеточием, а символом ).

Предформатированый текст

При создании HTML-страниц необходимо иметь в виду, что броузеры игнорируют пустое пространство (несколько пробелов, табуляцию), а также возврат каретки. Для того, чтобы избавиться от этого явления используется тег <PRE> с закрывающей парой </PRE>. Этот тег делает заключенный в него текст предформатированным (текст выводится таким, какой он есть). Правда, справедливости ради, следует заметить, что текст будет выведен не очень красивым моноширинным шрифтом.

Пример использования тега <PRE>:

<PRE>
 У курицы - бантик
 У кошки - сапожки
 У двух петухов - по гармошке
 Вот так!
</PRE>

Нумерованные списки

Для того, чтобы включить в HTML-страницу нумерованный список, не обязательно нумеровать строки. Можно воспользоваться так называемым упорядоченным списком, а номера сформирует сам броузер.

Для упорядоченного списка применяется два типа тегов: весь список обрамляется тегом <OL> и его закрывающей парой </OL>, а каждому элементу списка предшествует тег <LI>, у которого закрывающей пары нет, т.е. ее использовать не обязательно.

Пример использования нумерованного списка:

<OL>
 <LI>Первый элемент нумерованного списка
 <LI>Второй элемент нумерованного списка
 <LI>...
 <LI>...
 <LI>Последний элемент нумерованного списка
</OL>

Маркированные списки

Для наглядного изображения небольшого числа элементов удобно вместо нумерованных применять маркированные списки (в таких списках броузер сам выводит слева от каждого элемента кружок или квадратик). Теги маркированного списка практически аналогичны нумерованному, с той лишь разницей, что для маркированного списка вместо тега <OL> и закрывающей пары </OL> применяется тег <UL> и его закрывающая пара </UL>.

Пример использования маркированного списка:

<UL>
 <LI>Первый элемент маркированного списка
 <LI>Второй элемент маркированного списка
 <LI>...
 <LI>...
 <LI>Последний элемент маркированного списка
</UL>

Создание внутренних связей в документе

Выше было рассмотрено использование ссылок для установления связей с другими HTML-страницами. Кроме этого, механизм ссылок можно использовать и при навигации внутри документа (если он достаточно большой). Для этого вверху HTML-страницы создается некое подобие обычного оглавления с указанием связей к конкретным главам.

Пример создания оглавления:

<AHREF="#Chapter1">Общие сведения о языке HTML</A>
<AHREF="#Chapter2">Форматирование текста</A>
<AHREF="#Chapter3">Использование таблиц</A>

Для именования фрагментов текста применяются теги <A> с атрибутом <NAME>.

Пример именования глав текста HTML-страницы:

<ANAME="Chapter1">Общие сведения о языке HTML</A>

Далее сам текст первой главы:

<ANAME="Chapter2">Форматирование текста</A>

Далее сам текст второй главы:

<ANAME="Chapter3">Использование таблиц</A>

Далее сам текст третьей главы

Основные приемы работы с броузером

Броузер - это программа, которая применяется для вывода HTML-страницы и взаимодействия с ней.

Приемы работы с броузером рассмотрим на примере работы с броузером NetscapeNavigator. Запустив данный броузер, рассмотрим основные элементы его экрана:

  • полоса заголовка текущей страницы выводится в верхней строке экрана;
  • полоса выпадающих меню (File, Edit, View, Go, Bookmarks и т.д. );
  • кнопки инструментальной полоски (квадратные кнопки) предоставляют доступ к основным средствам броузера по методу "наводи и щелкай";
  • поле Location (Местонахождение) - показывает адрес URL текущего документа (при вводе текста в данное поле метка изменится на Goto - Перейти);
  • кнопки каталогов предоставляют более простой доступ к командам меню Directory (Каталог);
  • область содержимого занимает большую часть экрана броузера и именно в ней появляется тело HTML-страницы (для просмотра больших страниц применяются полосы прокрутки);
  • полоса состояния позволяет узнать текущее состояние броузера и сообщает о ходе его текущей операции.

Броузер NetscapeNavigator выводит гипертекстовые связи подчеркнутым шрифтом, цвет которого отличается от цвета остального текста. Для выбора связи надо щелкнуть на ней кнопкой мыши.

Чтобы посетить конкретную станцию WWW, можно определить ее адрес URL либо вводя адрес внутри поля Location, либо щелкнув на кнопке Open в инструментальной полоске, или открыв меню File из полосы выпадающих меню и выбрав команду OpenLocation.

Для возврата в предыдущий документ надо либо щелкнуть на кнопке Back (Назад) в инструментальной полоске, либо выбрать команду Back из меню Go в полосе выпадающих меню.

Назад | Содержание | Вперед

 

VPS/VDS серверы. 30 локаций на выбор

Серверы VPS/VDS с большим диском

Хорошие условия для реселлеров

4VPS.SU - VPS в 17-ти странах

2Gbit/s безлимит

Современное железо!

Бесплатный конструктор сайтов и Landing Page

Хостинг с DDoS защитой от 2.5$ + Бесплатный SSL и Домен

SSD VPS в Нидерландах под различные задачи от 2.6$

✅ Дешевый VPS-хостинг на AMD EPYC: 1vCore, 3GB DDR4, 15GB NVMe всего за €3,50!

🔥 Anti-DDoS защита 12 Тбит/с!

Новости мира IT:

Архив новостей

IT-консалтинг Software Engineering Программирование СУБД Безопасность Internet Сети Операционные системы Hardware

Информация для рекламодателей PR-акции, размещение рекламы — adv@citforum.ru,
тел. +7 495 7861149
Пресс-релизы — pr@citforum.ru
Обратная связь
Информация для авторов
Rambler's Top100 TopList liveinternet.ru: показано число просмотров за 24 часа, посетителей за 24 часа и за сегодня This Web server launched on February 24, 1997
Copyright © 1997-2000 CIT, © 2001-2019 CIT Forum
Внимание! Любой из материалов, опубликованных на этом сервере, не может быть воспроизведен в какой бы то ни было форме и какими бы то ни было средствами без письменного разрешения владельцев авторских прав. Подробнее...