Меню
Главная
УСЛУГИ
Авторизация/Регистрация
Реклама на сайте
 
Главная arrow Информатика arrow Информатика для гуманитариев
< Предыдущая   СОДЕРЖАНИЕ   Следующая >

Создание веб-страниц с использованием HTML

HTML – главный и наиболее используемый при создании интернет-сайтов язык программирования веб-станиц Интернета (Всемирной паутины). Он был придуман Тимом Бернерс-Ли как язык описания гипертекстовых структур, пригодный для использования людьми, не являющимися специалистами в области компьютерной верстки и интернет-дизайна. К середине 1990-х гг. язык гипертекстовой разметки HTML был приведен в стандартизованную форму и спецификации языка были впервые опубликованы в 1995 г. в документе "Hypertext Markup Language- 2.0"[1]. Этот стандарт остается ядром программных средств конструирования содержания веб-сайтов Интернета и сегодня.

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

Помимо этого, язык HTML позволяет задать и другие базовые параметры документа, который должен стать веб-страницей:

• как должны выглядеть на экране компьютера пользователя те или иные элементы текста (включая обозначение границ абзаца, перехода с одной строки текста на другую, выравнивания фрагментов текста относительно границ экранного пространства, оформление информации в виде списка или в виде таблицы, обозначение гиперссылок на разные части текста или на какие-то другие веб-страницы в Интернете и т.д.);

• как все смысловые, структурные и композиционные элементы текста должны быть размещены на двумерном пространстве веб-страницы наиболее оптимальным и эффективным образом (т.е. определять дизайн вебстраницы);

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

• какие элементы в тексте документа потребуют определенных интерактивных действий пользователя (например, обозначение способов активизации компонентов веб-страницы, обозначающих гиперссылки);

• в какой последовательности и в каком виде должны применяться правила дизайнерского оформления предъявляемого пользователю информационного материала для усиления эффективности его воздействия.

Все эти, а также некоторые другие параметры гипертекстовых материалов можно однозначно определить в языке HTML с помощью специальных команд, представляющих собой коды, составленные по определенным правилам и записанные в виде символьных последовательностей, которые называются тэгами (англ. tag – ярлык, этикетка, бирка). Набор тэгов языка HTML фиксирован и стандартизирован (хотя в него возможно добавлять новые тэги, которые, однако, должны подчиняться установленным принципам); совокупность всех тэгов определяет самые широкие возможности языка HTML по оформлению информации в Интернете.

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

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

Например, базовые тэги языка HTML, без которых невозможно создание веб-страницы и установление ее связей с другими страницами Интернета (гиперссылок), выглядят так:

• тэг <html> должен стоять в начале текста любого файла, который является страницей Интернета – веб-документом (это открывающий тэг); соответственно, в конце текста файла должен стоять парный ему закрывающий тэг – </html>;

• тэг <body>[2] (он отмечает начало так называемого тела веб-документа, т.е. того, что будет выведено браузером на экран компьютера) ставится перед началом текста, который появится на экране пользователя; этот тэг тоже парный, поэтому обозначающий конец текста веб-страницы закрывающий тэг выглядит следующим образом: </body>;

• тэгом <h1> обозначается текст, который должен выглядеть на компьютере пользователя как заголовок первого уровня (для него выбирается наиболее крупный размер шрифта; буквы или символы, отмеченные таким тэгом, будут иметь полужирное написание);

• тэгом <h2> обозначается, соответственно, текст заголовка более низкого уровня и т.д. (всего возможно использовать до шести видов заголовков);

• открывающий тэг <head> (им помечается так называемая голова вебдокумента) и парный к нему закрывающий </head> обозначают информацию, которая предваряет тело веб-документа и обычно содержит его название (заголовок веб-документа, который соответствует тексту, помещенному между тэгами <title> и </title>; тэги заголовка должны находиться между тэгами, отмечающими голову документа); между тэгами <head> и </head> помещают также всю служебную информацию об особенностях оформления содержащейся в нем информации – например, о формате стилей, используемых в этом документе, и т.п.;

• связь какого-то фрагмента веб-страницы с другими ее фрагментами либо с другими файлами или другими веб-страницами осуществляется с помощью тэгов <а namc> (в первом случае) и <а href> во втором[3]; особенностью этих тэгов является то, что в них обязательно указывается имя маркера или реквизиты адресата задаваемой этим типом тэгов гиперссылки.

Наиболее часто используемые для создания веб-страницы тэги и краткое описание их функций и формата показаны в табл. 4.1.

Таблица 4.1

Коды основных элементов языка HTML

Тэг

Описание тэга

Пример

<html>

</html>

Обозначение начала и конца веб-документа

<html>

</html>

<head><title>

</title>

</head>

Обозначение головы и заголовка веб-документа

<head>

<title>

</title>

</head>

<body>

</body>

Обозначение начата и конца текста (тела) веб-документа

<body>

</body>

<P>

</p>

Обозначение границ абзаца

<р>Это мой университет. Он находится в Москве. </р><р>Это мой родной город. </р>

<br>

Обозначение перехода на новую строку текста

<р>Я очень люблю поэмы А. С. Пушкина, особенно: </р><р>Мой дядя самых честных правил,<br>Когда не в шутку занемог...</р>

<p align="center"> </p>

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

<р align="center">Mocквa – столица нашей Родины. </р><р>Это мой родной город. Он очень красивый. </р>

<p align="right">

</p>

Обозначение абзаца, в котором текст выровнен по правому краю

<р>Мой дядя самых честных правил,<br>Когда не в шутку занемог ...</р> <р align="right">A. С. Пушкин </р>

<p align="1eft">

</p>

Обозначение абзаца, в котором текст выровнен по левому краю

<р align="left">A. С. Пушкин </р><р align="center">Мой дядя самых честных правил ,<br> Когда не в шутку занемог...</p>

<h1>

</h1>

или

<h2>

</h2>

Обозначение абзаца, в котором находится заголовок текста (возможно до шести видов заголовков в зависимости от уровня заголовка, т.е. по уменьшению степени важности)

<h1>Москва – столица нашей Родины</h1><р>Это мой родной город. </р> <h2>Главные достопримечательности Москвы <h2><р>Это мой родной город. </р>

”<strong>

</strong>

Используется для выделения фрагмента текста полужирным шрифтом

<p><strong>Mocквa </strong> – столица нашей Родины.</р>

<em>

</em>

Используется для выделения фрагмента текста курсивом

<р><em>Москва</em> – столица нашей Родины.</р>

<u >

</u>

Используется для выделения фрагмента текста подчеркиванием

<р><u>Москва</u> – столица нашей Родины.</р>

<s>

</s>

Используется для перечеркивания текста

<р>У нас скидки! Старая цена <s>5000 py6.</s>, новая цена 1000 руб.!</р>

<sup>

</sup>

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

2<sup>2</sup> = 4

<sub>

</sub>

Создает нижний индекс

Химическая формула воды: H<sub>2</sub>0

<font size="+2"> </font>

Изменяет вид шрифта, а именно: увеличивает размер букв в отмеченном тэгом фрагменте текста на две единицы по сравнению со стандартным размером (стандартный размер шрифта равен 3)

<р>У нас скидки! Старая цена 5000 руб., новая цена <font size="+2">1000 </font> руб.!</р>

<font size="l"> </font>

Изменяет вид шрифта, а именно: определяет размер букв в отмеченном тэгом фрагменте текста (всего возможны семь градаций размеров шрифта 1, 2, 3, 4, 5, 6, 7)

<p><font size="l">MocKBa</font> – столица нашей Родины.

<font color="red"> </font>

Изменяет вид шрифта, а именно: отмеченные тэгом фрагменты текста будут красного цвета (цвет задается либо RGB-обозначением в шестнадцатиричной системе, либо английским названием одного из 16 базовых цветов: BLACK – черный, BLUE – синий, NAVY – темносиний, LIME – светло-зеленый, GREEN – зеленый, SILVER – светло-серый, AQUA – голубой, OLIVE – оливковый, RED – красный, MAROON – коричневый, GREY – серый, FUCHSIA – цвет фуксии (растение), PURPLE – фиолетовый, YELLOW – желтый, WHITE – белый, TEAL – зеленовато-голубой)

<p><font со1ог="red">Москва </font> – столица нашей Родины.</р>

<body bgcolor="silver" text="green"> </body>

Задает цвет фона вебстраницы (bgcolorbackground color), а также цвет текста (в данном случае – красный) во всем документе

<body bgcolor="silver" text="green''><p>Это мой университет. Он находится в Mocквe.</p></body>

<body background="fon01. jpg">

Позволяет использовать файл картинки (в данном случае графический файл с именем fon01.jpg) в качестве фона веб-страницы

<body background="fon01. jpg><p>Это мой университет. Он находится в Mocквe.</p></body>

<font face=''courier new"> </font>

Изменяет вид шрифта, а именно: задает гарнитуру шрифта (рекомендуется использовать шрифты семейства Times New Roman, A rial, Tahoma, Courier; Courier New, которые чаще всего бывают установлены на всех компьютерах)

<p><font face="courier new”>Mocквa</font> – столица нашей Родины.</р>

<ul>

<li>

</li>

</ul>

Создает неупорядоченн ый список, при этом обязательно обозначение каждого из элементов этого списка с помощью тэга <Н>

<р>Столицы славянских стран:

<ul>

<li>России – Москва,</li> <li>Полыии – Варшава, </li>

<li>Бол гарии – София, </li>

<li>Чехии – Прага,</li> <li>Словакии – Братислава,</li>

</ul>

</р>

<ol>

<li>

</li>

</ol>

Создает упорядоченный список, при этом обязательно обозначение каждого из элементов этого списка с помощью тэга <И>

<р>Славянские страны Восточной Европы:

<о1>

<li>Бол гария,</li>

<li>Польша,</li>

<li>Сербпя</li>

<li>Словакия </li>

<li>Словения,</li>

<li>Чехия,</li>

<li>Хорватия</li>

</о1>

</р>

<a href=" msu.ru"> </a>

Создаст ссылку на вебстраницу в Интернете

<а href="msu.ru"> Это ссылка на веб-сайт Московского университета.

</а>

<а href="file.htm"> </а>

Создает ссылку на другой файл (в данном случае на другой файл в формате lit ml)

<а href="file.htm">

Это ссылка на файл с новыми материалами об университете.</а>

<а href=" mailto:contact@ philol.msu.ru">

</а>

Ссылка на адрес электронной почты

<а href="mailto:contact@ philol.msu.ru">Это ссылка на электронный почтовый адрес филологического факультета МГУ им. М. В. Ломоносова

<img src="mgu.jpg">

Вставка рисунка (графического элемента). В вебдокумент можно вставить изображение в форматах: gif, jpg (jpeg), png

Это фотография моего университета.<р> <iing src="mgu,jpg"> </р>

<img src="mgu.jpg" width="65" height="59" hspace="15" vspace="15" align="right">

Вставка графического элемента с заданием параметров отображения картинки: ширины рисунка (width), высоты рисунка (height), расстояние от предыдущего элемента веб-документа до рисунка (по горизонтали – hspacehorizontal space), расстояние от других элементов рисунка по вертикали (vspacevertical space) и способ выравнивания рисунка относительно текста (обтекание рисунка текстом) – выравненного вправо

Это фотография моего университета шириной около 2 см и высотой около 1,8 см, выравненная Bnpaвo.<img src="mgu.jpg" width="250" height="250" hspace="15"

vspace="15" align="right">

Все файлы веб-страниц должны иметь в самом начале кодифицированное обозначение типа файла как файла Интернета. Оно может выглядеть примерно следующим образом:

<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML4.01 Transitional//EN" "w3.org/TR/html4/loose.dtd">

Примеры

Задание 1. Набрать в текстовом редакторе Блокнот следующий текст и сохранить его в файл с расширением htm.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "w3.org/TR/html4/loose.dtd">

<html>

<head><title>Moй yниверситет</title></head>

<body bgcolor="silver" text="green"><p>Это мой университет. Он находится в Москве.</р>

<р>Это мой родной город.</р>

<р>Я очень люблю поэмы А. С. Пушкина, особенно эту:</р>

<р>Мой дядя самых честных правил,<br>Когда не в шутку занемог...</p>

<р align=''center">Moй дядя самых честных правил,<br> Когда не в шутку занемог...</р>

<р align="right">A. С. Пушкин </р>

<р align="left">A. С. Пушкин </р>

<р>Мой дядя самых честных правил, <br>Когда не в шутку занемог...</p> <р align=''center">Mocквa – столица нашей Родины.</р>

<р>Это мой родной город.</р>

<h1>Москва – столица нашей Родины</h1>

<р>Это мой родной город.</р>

<h2>Главные достопримечательности Москвы</h2>

<р>Это мой родной город. Он очень красивый.</р> <p><strong>Mocквa</strong> – столица нашей Родины.</р> <р><em>Москва</em> – столица нашей Родины.</р>

<р><u>Москва</u> – столица нашей Родины.</р>

<р>У нас скидки! Старая цена <s>5000 pyб.</s>, новая цена 1000 руб.!</Р <p>2<sup>2</sup> = 4</р>

<р>Химическая формула воды: H<sub>2</sub>0</p>

<р>У нас скидки! Старая цена 5000 руб., новая цена <font size= +2 >1000</font> руб.!</р>

<p><font size=''6">Mocквa</font> – столица нашей Родины.</р>

<p><font color="red">Mocквa</font> – столица нашей Родины.</р>

<p><font face="courier new">Mocквa</font> – столица нашей Родины.</р> <р>Столицы славянских стран:

<ul>

<li>России – Москва,</li>

<li>Польши – Варшава,</li>

<li>Болгарии – София,</li>

<li>Чехии – Прага,</li>

<li>Словакии – Братислава,</li></ul></p>

<р>Славянские страны Восточной Европы:

<оl>

<li>Болгария,</li>

<li>Польша,</li>

<li>Сербия</li>

<li>Словакия</li>

<li>Словения,</li>

<li>Чехия,</li>

<li>Хорватия</li>

</оl></р>

<р><а href="msu.ru">Это ссылка на веб-сайт Московского университета.</а></р>

<р><а href=''mailto: Этот адрес e-mail защищен от спам-ботов. Чтобы увидеть его, у Вас должен быть включен Java-Script ">Это ссылка на электронный почтовый адрес филологического факультета МГУ им. М. В. Ломоносова</а></р>

<р>Это фотография моего университета шириной около 6,5 см и высотой около 5 см, выравненная вправо.</р>

<img src="msu.jpg" width="250" height="250" hspace="15" vspace="15" align="right"> </body>

</html>

Задание 2. Загрузите в программу-браузер файл с текстом задания 1. Созданная веб-страница должна иметь следующий вид (рис. 4.4–4.7).

Образец веб-страницы задания 1

Рис. 4.4. Образец веб-страницы задания 1

Образец веб-страницы задания 1 (продолжение)

Рис. 4.5. Образец веб-страницы задания 1 (продолжение)

Образец веб-страницы задания 1 (продолжение)

Рис. 4.6. Образец веб-страницы задания 1 (продолжение)

Образец веб-страницы задания 1 (продолжение)

Рис. 4.7. Образец веб-страницы задания 1 (продолжение)

  • [1] URL: rfc-editor.org/rfc/rfcl866.txt (дата обращения: 30.01.2015).
  • [2] От англ. body – главная, основная часть чего-то. URL: blip://classes.ru/dictionary- english-russian-Apresyan.htm (дата обращения: 30.01.2015).
  • [3] От англ. anchor – якорь; англ. href – сокр. от hypertext reference – гипертекстовая ссылка.
 
Если Вы заметили ошибку в тексте выделите слово и нажмите Shift + Enter
< Предыдущая   СОДЕРЖАНИЕ   Следующая >
 
Предметы
Агропромышленность
Банковское дело
БЖД
Бухучет и аудит
География
Документоведение
Журналистика
Инвестирование
Информатика
История
Культурология
Литература
Логика
Логистика
Маркетинг
Медицина
Менеджмент
Недвижимость
Педагогика
Политология
Политэкономия
Право
Психология
Религиоведение
Риторика
Социология
Статистика
Страховое дело
Техника
Товароведение
Туризм
Философия
Финансы
Экология
Экономика
Этика и эстетика