11

Основы языка HTMLОсновы языка HTML Тэги. АтрибутыТэги. Атрибуты..

22

World Wide Web и HTML Современный этап развития Интернета начался Современный этап развития Интернета начался

в начале 90-х годов с появлением нового в начале 90-х годов с появлением нового протокола обмена информацией. Этот протокол протокола обмена информацией. Этот протокол называетсяназывается HTTPHTTP (Hyper Text Transfer Protocol – (Hyper Text Transfer Protocol – протокол передачи гипертекста). протокол передачи гипертекста).

Вместе с этим протоколом появилась и службаВместе с этим протоколом появилась и служба World Wide WebWorld Wide Web (часто также называемая (часто также называемая WWWWWW или просто или просто Web)Web). Эту систему можно . Эту систему можно сравнить с огромной энциклопедией, страницы сравнить с огромной энциклопедией, страницы которой разбросаны по компьютерам-серверам, которой разбросаны по компьютерам-серверам, объединённым сетью Интернет.объединённым сетью Интернет.

33

библиотека

страница

Web-страницаWeb-страница – – это основная информационная единица это основная информационная единица WWWWWW. Она содержит . Она содержит отдельный документ, хранящийся на Web-сервере.отдельный документ, хранящийся на Web-сервере.Web-сервер – Web-сервер – это компьютер в сети Интернет, хранящийэто компьютер в сети Интернет, хранящий Web-страницы и Web-страницы и соответствующее программное обеспечение для работы с ними.соответствующее программное обеспечение для работы с ними.Каждая Каждая Web-страницаWeb-страница имеет своё имя, по которому к ней можно обратиться. имеет своё имя, по которому к ней можно обратиться. Web-сайтWeb-сайт – – это несколько Web-страниц, объединённых общей темой. У каждого это несколько Web-страниц, объединённых общей темой. У каждого Web-сайта есть своя главная загрузочная страница, которая называется Web-сайта есть своя главная загрузочная страница, которая называется ДомашнейДомашней..Web-страницы публикуются в Интернете путем размещения на Web-страницы публикуются в Интернете путем размещения на Web-Web-серверахсерверах HTTPHTTP (Web-узлах). Информация на (Web-узлах). Информация на WebWeb-страницах может быть самой разной: -страницах может быть самой разной: текст, рисунок, фотография, мультимедиа.текст, рисунок, фотография, мультимедиа.

44

Страницы в книге соединены переплётом, а Страницы в книге соединены переплётом, а как соединены Web-страницы? С помощью как соединены Web-страницы? С помощью гиперссылок.гиперссылок.

Слова, которые являются гиперссылками Слова, которые являются гиперссылками выделяются цветом и подчёркиванием. выделяются цветом и подчёркиванием.

При подведении мышки к гиперссылке, При подведении мышки к гиперссылке, курсор превращается в «указующий перст», а курсор превращается в «указующий перст», а после щелчка по этому слову, вы по после щелчка по этому слову, вы по гиперссылке, перейдёте к просмотру другого гиперссылке, перейдёте к просмотру другого документа, который может находится на документа, который может находится на другом сервере, в другой стране.другом сервере, в другой стране.

Роль гиперссылки может играть не только Роль гиперссылки может играть не только текст, но и рисунок, фотография, указатель текст, но и рисунок, фотография, указатель на звуковой документ. Поэтому наряду с на звуковой документ. Поэтому наряду с понятием гипертекст (текст с гиперсвязями) понятием гипертекст (текст с гиперсвязями) используют термин «гипермедиа».используют термин «гипермедиа».

55

Переход от одной страницы к другой происходит по Переход от одной страницы к другой происходит по гиперсвязям, образующим сеть, которая напоминает гиперсвязям, образующим сеть, которая напоминает паутину.паутину.

Перемещаться по «паутине» помогает специальное Перемещаться по «паутине» помогает специальное программное обеспечение, которое называется программное обеспечение, которое называется WebWeb--браузеромбраузером ( (browse – browse – осматривать, изучать)осматривать, изучать)Примеры браузеровПримеры браузеров: : Internet Explorer, Opera,Internet Explorer, Opera, Netscape NavigatorNetscape Navigator

Найти информацию можно по разному:Найти информацию можно по разному: Набрать известный адрес Набрать известный адрес Web-Web-страницы в адресной строке страницы в адресной строке

браузера и нажать браузера и нажать EnterEnter;;

Перемещаться по гиперсвязям в надежде, что наткнётесь на то Перемещаться по гиперсвязям в надежде, что наткнётесь на то что нужно;что нужно;

Использовать специальные Использовать специальные поисковые программы.поисковые программы.

66

Конспект Конспект (записать в тетрадь)

WWWWWW – это самая известная и самая популярная служба – это самая известная и самая популярная служба Интернет. Интернет.

Web-Web-страницастраница – это отдельный документ – это отдельный документ WWWWWW.. Web-Web-сайтсайт – это – это Web-Web-страницы, связанные определённой страницы, связанные определённой

темой.темой. Web-Web-серверсервер – это компьютер в сети Интернет, хранящий – это компьютер в сети Интернет, хранящий Web-Web-

страницы и соответствующее программное обеспечение для страницы и соответствующее программное обеспечение для работы с ними.работы с ними.

Язык HTMLЯзык HTML – это специальный язык, с помощью которого – это специальный язык, с помощью которого создаются создаются WebWeb-страницы, это язык разметки гипертекста. -страницы, это язык разметки гипертекста.

ГипертекстГипертекст –– это способ организации текстовой информации, это способ организации текстовой информации, внутри которой установлены смысловые связи между её внутри которой установлены смысловые связи между её различными фрагментами (гиперсвязи).различными фрагментами (гиперсвязи).

БраузерБраузер – программа для работы пользователя с – программа для работы пользователя с WWWWWW Web- Web- страничкистранички обычно имеют расширение обычно имеют расширение ..HTMHTM или или .HTML.HTML

77

Язык HTMLЯзык HTML Содержание Web-страниц может быть разным, но все они Содержание Web-страниц может быть разным, но все они

создаются с использованиемсоздаются с использованием специального специального языкаязыка HTML HTML (Hyper Text Markup Language –(Hyper Text Markup Language – язык разметки гипертекста. язык разметки гипертекста. Под разметкой понимается вставка в текст документа Под разметкой понимается вставка в текст документа специальных кодов, определяющих то, как итоговый специальных кодов, определяющих то, как итоговый гипертекстовый документ должен отображаться гипертекстовый документ должен отображаться программой-браузером). программой-браузером).

HTMLHTML представляет собой компьютерный язык, в представляет собой компьютерный язык, в некотором смысле родственный языкам некотором смысле родственный языкам программирования. программирования.

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

При создании документа в HTML делается акцент на его При создании документа в HTML делается акцент на его структуре.структуре.

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

88

Тэги HTML Коды языкаКоды языка HTML, HTML, с помощью которых с помощью которых

выполняется разметка исходного текста, выполняется разметка исходного текста, называются называются тэгамитэгами..

ПримерПример тэга: тэга: <BODY><BODY> Тэг Тэг –– это набор символов. это набор символов. Тэги языка HTML Тэги языка HTML заключаются в угловые заключаются в угловые

скобкискобки. Тэг всегда начинается со знака «меньше» . Тэг всегда начинается со знака «меньше» ((<<) и заканчивается знаком «больше» () и заканчивается знаком «больше» (>>).).

Каждый тэг в языкеКаждый тэг в языке HTML HTML имеет специальное имеет специальное назначение. Регистр букв в названиях тэгов не назначение. Регистр букв в названиях тэгов не имеет значения – можно использовать как имеет значения – можно использовать как строчные, так и прописные буквы, хотя строчные, так и прописные буквы, хотя общепринято использовать прописные буквыобщепринято использовать прописные буквы, , чтобы тэги отличались от обычного текста чтобы тэги отличались от обычного текста документа.документа.

99

Как правило, один тэгКак правило, один тэг HTML HTML воздействует только на часть воздействует только на часть документа, например на абзац. В таких случаях используют документа, например на абзац. В таких случаях используют парные тэги: парные тэги: открывающийоткрывающий и и закрывающийзакрывающий.. Открывающий Открывающий тэг создает эффект, а закрывающий – прекращает его тэг создает эффект, а закрывающий – прекращает его действие. Закрывающие тэги начинаются с символа действие. Закрывающие тэги начинаются с символа слешслеш (/). (/).

Пример:Пример: <BODY> <BODY> ЗдравствуйтеЗдравствуйте</BODY></BODY> Некоторые тэги дают Некоторые тэги дают разовый эффектразовый эффект в месте своего в месте своего

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

Если в тэге допущена ошибка, то тэг Если в тэге допущена ошибка, то тэг игнорируется целикомигнорируется целиком.. При отображении документа в браузере сами тэги При отображении документа в браузере сами тэги не не

отображаютсяотображаются, но , но влияютвлияют на способ отображения документа. на способ отображения документа.

< >

ТЭГ

1010

Конспект Конспект (записать в тетрадь) ТэгиТэги – это коды языка HTML, с помощью которых – это коды языка HTML, с помощью которых

выполняется разметка исходного текста.выполняется разметка исходного текста. Тэг всегда начинается со знака «Тэг всегда начинается со знака «меньшеменьше» (<) и » (<) и

заканчивается знаком «заканчивается знаком «большебольше» (>).» (>). Прописные и строчные буквы при написании тэгов Прописные и строчные буквы при написании тэгов не не

различаютсяразличаются.. Существуют два типа тэгов – Существуют два типа тэгов – парные парные ии непарые непарые. В парном . В парном

тэге тэге открывающийоткрывающий тэг создает эффект, а тэг создает эффект, а закрывающийзакрывающий – – прекращает его действие. Закрывающие тэги начинаются с прекращает его действие. Закрывающие тэги начинаются с символа символа слешслеш (/). (/).

При отображении документа в браузере сами тэги При отображении документа в браузере сами тэги не не отображаютсяотображаются, но , но влияютвлияют на способ отображения на способ отображения документа.документа.

Тэги делятся на Тэги делятся на категориикатегории по выполняемым ими функциям по выполняемым ими функциям – структурные тэги, тэги форматирования абзацев, – структурные тэги, тэги форматирования абзацев, символов, определения гиперссылок, включения графики. символов, определения гиперссылок, включения графики.

1111

Атрибуты тэгов Открывающие тэги часто могут содержать Открывающие тэги часто могут содержать

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

АтрибутыАтрибуты — это дополнительные ключевые — это дополнительные ключевые слова, отделенные от ключевого слова тэга и друг слова, отделенные от ключевого слова тэга и друг от друга пробелами.от друга пробелами.

Некоторые атрибуты требуют указания значения Некоторые атрибуты требуют указания значения атрибутаатрибута.. Это значение отделяется от ключевого Это значение отделяется от ключевого слова знаком равенства (слова знаком равенства (==). Значение атрибута ). Значение атрибута должно заключаться в должно заключаться в кавычкикавычки, но во многих , но во многих случаях эти кавычки могут опускаться без какого-случаях эти кавычки могут опускаться без какого-либо вреда.либо вреда.

Пример:Пример: <BODY<BODY bgcolor bgcolor == “red”>“red”>

Закрывающие тэги Закрывающие тэги никогданикогда не содержат атрибутов. не содержат атрибутов.тэг атрибут значение атрибута

1212

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

Некоторые атрибуты требуют указания Некоторые атрибуты требуют указания значения атрибута, который отделяется от значения атрибута, который отделяется от ключевого слова знаком равенства (=) и ключевого слова знаком равенства (=) и заключается в кавычки.заключается в кавычки.

Закрывающие тэги никогда не содержат Закрывающие тэги никогда не содержат атрибутов. атрибутов.

Конспект Конспект (записать в тетрадь)

1313

Структура документа HTMLСтруктура документа HTML ДокументДокумент HTML HTML состоит из основного текста документа и тэгов разметки состоит из основного текста документа и тэгов разметки.. ДокументДокумент HTML HTML – – это, по существу, обычный текстовый файл. это, по существу, обычный текстовый файл. Пример HTML-файла:Пример HTML-файла:

<HTML><HEAD><TITLE>Расписание занятий 9 классов</TITLE></HEAD><BODY BGCOLOR="00CC99"><P ALIGN=CENTER><FONT COLOR="PURPLE" SIZE="6" FACE="ARIAL"><B>Расписание занятий 9-х классов на понедельник</B></FONT></P><P><TABLE BGCOLOR="00FFFF" BORDER="1" WIDTH=50%><TR ALIGN=CENTER><TD>Урок</TD><TD>9 А</TD><TD>9 Б</TD><TD>9 В</TD></TR> <TR><TD>1</TD><TD>Физика</TD><TD>Химия</TD><TD>История</TD></TR><TR><TD>2</TD><TD>Химия</TD><TD>Физика</TD><TD>Биология</TD></TR> <TR><TD>3</TD><TD>Биология</TD><TD>История</TD><TD>Химия</TD></TR> </TABLE></BODY></HTML>

1414

Документ должен начинаться с Документ должен начинаться с открывающего тэга открывающего тэга <HTML><HTML> и и заканчиваться соответствующим заканчиваться соответствующим закрывающим тэгомзакрывающим тэгом </HTML></HTML>..

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

1515

Раздел заголовка документа размещен Раздел заголовка документа размещен между тэгами между тэгами <HEAD>…</HEAD><HEAD>…</HEAD> и и содержит информацию о документе в содержит информацию о документе в целом. целом.

Этот раздел состоит из нескольких частей, Этот раздел состоит из нескольких частей, основной из которых является заголовок основной из которых является заголовок окна, записанный с помощью тэга окна, записанный с помощью тэга <TITLE>…</TITLE><TITLE>…</TITLE>,, который используют который используют чтобы заполнить строку заголовка окна чтобы заполнить строку заголовка окна браузера.браузера.

Сам текст документа располагается в теле Сам текст документа располагается в теле документа. Тело документа располагается документа. Тело документа располагается между тэгами между тэгами <BODY>…</BODY<BODY>…</BODY>>

1616

Общий вид HTML-файлаОбщий вид HTML-файла<HTML><HTML>

<HEAD><HEAD> ccлужебная информациялужебная информация

<TITLE><TITLE> заголовок окна браузеразаголовок окна браузера

<<//TITLE>TITLE>

<<//HEAD>HEAD>

<BODY><BODY>тело документа

</BODY></BODY>

</HTML></HTML>

Конспект Конспект (записать в тетрадь)

заголовок

Основныечасти HTML-документа

1717

Порядок создания WEB-страницыПорядок создания WEB-страницы

Запустить редактор текстов Запустить редактор текстов БлокнотБлокнот.. Составить текст Составить текст WEB-страницыWEB-страницы с помощью с помощью

тэгов языка HTML.тэгов языка HTML. Сохранить текст в личную папку с расширением Сохранить текст в личную папку с расширением

HTMHTM или или HTMLHTML.. Запустить программу-браузер Запустить программу-браузер Internet ExplorerInternet Explorer.. Просмотреть Просмотреть WEB-страницуWEB-страницу из личной папки, из личной папки,

используя меню используя меню Файл/Открыть…/Обзор…Файл/Открыть…/Обзор…

Конспект Конспект (записать в тетрадь)

1818

Правила записи текста HTML-файлаПравила записи текста HTML-файла

Записывайте имена тэгов заглавными Записывайте имена тэгов заглавными буквами, а имена атрибутов и их значения буквами, а имена атрибутов и их значения — малыми.— малыми.

Не записывайте HTML-файлы со слишком Не записывайте HTML-файлы со слишком длинными строчками. Любая строка должна длинными строчками. Любая строка должна целиком помещаться на экране редактора.целиком помещаться на экране редактора.

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

Конспект Конспект (записать в тетрадь)

1919

Основные (стандартные) цветаОсновные (стандартные) цвета Цвет может быть задан как шестнадцатеричным Цвет может быть задан как шестнадцатеричным

числом (предваряемым знаком #), так и числом (предваряемым знаком #), так и зафиксированным именем.зафиксированным именем.•Имя •Код •Описание •Имя •Код •Описание

•black •#000000 •черный •green •#008000 •зеленый•silver •#C0C0C0 •серебряный •Lime •#00FF00 •светло-

зеленый•gray •#808080 •серый •olive •#808000 •оливковый•white •#FFFFFF •белый •yellow •#FFFF00 •желтый•maroon •#800000 •коричневый •navy •#000080 •темно-синий

•red •#FF0000 •красный •blue •#0000FF •синий•purple •#800080 •темно-

сиреневый•teal •#008080 •петроль

•fuchsia •#FF00FF •Сиреневый •aqua •#00FFFF •голубой

2020

Основные тэги HTMLОсновные тэги HTML

• Назначение • Формат• Значение

атрибута• Структура Web-страницы

• Начало и конец страницы

• <HTML>…</HTML>

• Заголовок страницы • <HEAD>…</HEAD>

• Заголовок окна страницы

• <TITLE>…</TITLE>

• Содержание страницы

• <BODY>…</BODY>

2121

• Форматирование текста• Заголовок (n – уровни

от 1 до 6)• <Hn>…</Hn>

• Абзац • <P>…</P>

• Абзац с выравниванием

• <P ALIGN="left">…</P> • left, center,• right, justify

• Перевод строки • <BR>

• Горизонтальный разделитель

• <HR SIZE="10" NOSHADE>

• Выравнивание по центру

• <CENTER>…</CENTER>

• Авторское форматирование

• <PRE>…</PRE>

2222

•Форматирование шрифта

•Полужирный •<B>…</B>

•Курсив •<I>…</I>

•Подчеркнутый •<U>…</U>

•Верхний индекс •<SUB>…</SUB>

•Нижний индекс •<SUP>…</SUP>

•Размер шрифта (n – от 1 до 7)

•<FONT SIZE=n>…</FONT>

•Цвет шрифта •<FONT COLOR="green">…</FONT>

•Тип шрифта •<FONT FACE="Arial">…</FONT>

2323

1.1. Запишите домашнее задание:Запишите домашнее задание:- выучить конспект;- выучить конспект;- создать простейшую - создать простейшую WebWeb--

страничку.страничку.

2. Выполните лабораторную 2. Выполните лабораторную работу.работу.