Основные понятия языка HTML

Размещено на http://www.allbest.ru/

Основные понятия языка HTML

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

Отдельный документ, выполненный в формате HTML, называется:

HTML-документом;

Web-документом;

Web-страницей.

Такие страницы, как правило, имеют расширение НТМ или HTML.

Гиперссыпка - фрагмент текста, который является указателем на другой файл или объект. Гиперссылки необходимы для того, чтобы обеспечить возможность перехода от одного документа к другому.

Группа Web-страниц, принадлежащих одному автору или одному издателю и взаимосвязанных общими гиперссылками, образует структуру, которая называется Web-узлом, или Web-сайтом.

Каждая HTML-страница имеет свой уникальный URL-адрес в Интернете.

Фрейм (Frame) - этот термин имеет два значения. Первое - область документа со своими полосами прокрутки. Второе значение - одиночное изображение в анимационном графическом файле (кадр).

Апплет (Applet) - программа, передаваемая на компьютер клиента в виде отдельного файла и запускаемая при просмотре Web-страницы.

Скрипт, или сценарий (Script), - программа, включенная в состав Web-страницы для расширения ее возможностей. Браузер InternetExplorer в определенных ситуациях выводит сообщение: "Разрешить выполнение сценариев на странице?" В этом случае имеются в виду скрипты.

CGI (CommonGatewayInterface) - общее название программ, которые, работая на сервере, позволяют расширять возможности Web-страниц. Например, без таких программ невозможно создание интерактивных Web-страниц.

Браузер (Browser) - программа для просмотра Web-страниц.

Элемент - конструкция языка HTML. Можно представить его себе как контейнер, содержащий данные и позволяющий отформатировать их определенным образом. Любая Web-страница представляет собой набор элементов. Одна из основных идей гипертекста возможность вложения элементов.

Пример

<Началоэлемента>Содержание элемента, данные, которые форматирует элемент </Конец элемента>

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

Пример

<Начальный тэг>Содержание элемента, данные, которые форматирует элемент </Конечный тэг>

Пример

<Р>Этот текст будет расположен в отдельном абзаце </Р>

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

Любая Web-страница представляет собой набор элементов. Один из основных принципов HTML возможность вложения элементов, они могут вкладываться один в другой.

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

Пример

<Рalign="center"> Этот текст будет выровнен по центру экрана </р>

В этом примере опять встречается тэг, определяющий начало и конец абзаца. Однако в начальном тэге находится атрибут align, который задает выравнивание текста по центру экрана.

Примечание:

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

все атрибуты располагаются в начальном тэге;

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

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

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

Структура документа HTML

Для того чтобы понять структуру Web-страницы, нам необходимо подробно рассмотреть все элементы, входящие в приведенный листинг.

Пример.

<COMMENT> Комментарий к документу </comment>

<html>

<head>

<title>мояперваястраница</title>

<META NAME="Author" CONTENT=" Ivanov Ivan ">

<META NAME="Keywords" CONTENT="Животные, природа, фауна">

</head>

<body>

Здравствуйте, это моя первая страница.

<!--<PRE> Комментарий </pre>-->

<br>

Добро пожаловать! :)

</body>

</html>

<COMMENT></comment>

Текст комментария. В любом языке программирования есть конструкции, позволяющие создавать произвольные ремарки. HTML в этом смысле -- не исключение. Текст, помещенный внутри COMMENT, игнорируется браузером. COMMENT может располагаться в любом месте кода Web-страницы. Комментарий должен быть отделен от основного текста.

Существует, правда, одно ограничение: внутри комментария не должны располагаться другие элементы. Так должно быть, разумеется, только в том случае, когда необходимо, чтобы все содержимое элемента COMMENT не отображалось на экране монитора. Если в комментарии будет присутствовать другой элемент, то его содержимое будет выведено на экран, отформатированное соответствующим образом.

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

<!-- Строка комментария -->

< ! -- Комментарий -- Не комментарий -- Снова комментарий -->

<HTML>… </html>

Отличительный признак HTML-документа. Одним из принципов языка является многоуровневое вложение элементов. HTML является самым внешним, так как между его стартовым и конечным тегами должна находиться вся Web-страница. В принципе, этот элемент можно рассматривать как формальность. Он имеет атрибуты version, lang и dir, которыми в данном случае мало кто пользуется, и допускает вложение элементов HEAD, BODY и PLAINTEXT, определяющих общую структуру Web-страницы. Естественно, что конечным тегом </html> заканчиваются все гипертекстовые документы.

<HEAD>…</head>

Информация о документе, которая не выводится на экран, называется заголовком. Так же как и HTML, HEAD служит только для формирования общей структуры документа. Этот элемент может иметь атрибуты lang и dir и допускает вложение элементов TITLE, ISINDEX, BASE, МЕТА, LINK, NEXTID.

<TITLE>… </title>

Элемент для размещения заголовка Web-страницы. Строка текста, расположенная внутри, отображается не в документе, а в заголовке окна браузера. Эта особенность часто используется для организации поиска в WWW. Поэтому авторы, создающие Web-страницы, должны позаботиться о том, чтобы строка внутри TITLE, не будучи слишком длинной (не более 64 символов), достаточно точно отражала назначение документа.

<МЕТА>

Этот элемент содержит служебную информацию, которая не отображается при просмотре Web-страницы. Внутри него нет текста в обычном понимании, поэтому нет и конечного тега. Каждый элемент МЕТА содержит два основных атрибута, первый из которых определяет тип данных, а второй -- содержание. Далее приведены несколько примеров meta-данных.

Дата, обозначающая «срок годности» документа:	name ="Expires" content = "Дата"
Адрес электронной почты:	name ="Reply-to" content ="Имя@Адрес"
Имя автора Web-страницы:	name ="Author" content =" Имяавтора"
Набор ключевых слов для поиска:	name ="Keywords" content ="Слово1, слово2, ..."
Краткое описание содержания Web-страницы:	name ="Description" content ="Содержаниестраницы"
Описание типа и характеристик Web-страницы:	name ="Content-Type" content ="Описаниестраницы"
Указание приложения, в котором была создана Web-страница:	name ="Generator" content ="Название HTML-редактора"

Атрибут name используется приложением-клиентом для получения дополнительной информации о Web-страницах и их упорядочения. Этот атрибут часто заменяют атрибутом http-equiv. Он используется сервером для создания дополнительных полей при выполнении запроса.

Кроме этого, элемент МЕТА может содержать URL. Шаблон соответствующего атрибута таков:

URL = "http: // адрес"

<BODY> …</body>

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

Это могут быть атрибуты, задающие:

цвет фона Web-страницы;

"обои" или рисунок фона страницы;

цвет текста на всей странице;

цвет гиперссылок (активных, выбранных, посещенных).

Параметр	Функция
bgcolor = "#RRGGBB"	Определение цвета фона. Цвет фона задается тремя двухразрядными шестнадцатеричными числами, которые определяют интенсивность красного, зеленого и синего цветов соответственно. Более подробно об определении цветов будет рассказано ниже.
background ="Путь к файлу фона"	Указание фонового рисунка. Оба вышеприведенных атрибута не являются альтернативными и часто используются совместно.
text = "#RRGGBB"	Определение цвета основного текста.
link = "#RRGGBB"	Определение цвета текста гиперссылок.
vlink = "#RRGGBB"	Определение цвета для использованных гиперссылок.
alink = "#RRGGBB"	Определение цвета для последней выбранной пользователем гиперссылки.
bgproperties	Изменение свойств фона (например, фиксирование фонового рисунка)
topmargin=”10”, bottommargin=”10”, leftmargin, rightmargin	Определение размера отступа от верхнего, нижнего, левого и правого краев документа. Значение задается в пикселях
marginwidth=”10”, marginheight=”10”	Netscape объединяет упомянутые параметры в две группы: горизонтальные и вертикальные отступы. Для учета особенностей всех браузеров, надо поставить и те и другие параметры

Пример.

<body topmargin=”5”, bottommargin=”5”, leftmargin=”10”, rightmargin=”10”, marginwidth=”10”, marginheight=”5”

Практическая работа №1

Основные понятия языка HTML. Структура документа HTML

web страница html файл

Цель работы: знакомство студентов с основными понятиями языка HTML, структурой HTML-документа, обязательными метками, комментариями, способами форматирования текста, физическими и логическими стилями, приобретение навыков создания простейших статических Web-документов.

На лабораторных занятиях мы будем использовать текстовый редактор Блокнот для подготовки HTML-файлов, а браузер MicrosoftInternetExplorer - как инструмент контроля за сделанным.

Задание 1. Создание простейшей Web-страницы

Указания к выполнению

1. Создайте на диске отдельную директорию (папку) для будущей страницы. D:\первые шаги\

2. Откроите текстовый редактор Блокнот (notepad) и наберите в нем структуру HTML-документа, которая приведена в примере 1:

3. Сохраните этот документ, присвоив ему имя *.html

Например: D:\первые шаги\index.html

4. Откройте с помощью InternetExplorer ваш документ (не закрывайте блокнот, он нам еще пригодится).

Если вы что-то изменили в вашем *.html документе (в Блокноте), то, не забудьте сохранить изменения, а чтобы посмотреть как это выглядит в InternetExplorer, надо нажать в InternetExplorer кнопку ОБНОВИТЬ (тоже самое касается других браузеров).



Если изменений не видно, то это значит, что вы где-то что-то неправильно написали, или забыли сохранить документ.

5. Вернитесь к сохраненному в Блокноте файлу.

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

7. В строке <title> укажите: "Домашняя страничка (ваше имя и фамилия)".

8. Сохраните файл как page2.htm.

9. Просмотрите результат в браузере, при необходимости отредактируйте файл при помощи Блокнота.

Контрольные вопросы

Охарактеризуйте язык тегов HTML.

Какова структура HTML-документов.

Перечислите обязательные метки и охарактеризуйте их.

Дайте определения следующих понятий: гипертекст, гиперссылка, Web-сайт, URL-адрес в Интернете, фрейм апплет скрипт, браузер элемент, тэг, атрибут.

Размещено на Allbest.ru