Методическая разработка для преподавателей,   занимающихся созданием сайтов

Тема: «Использование языка HTML при создании сайтов»

Основные понятия..................................................................................................... 3

Адресация компьютеров в сети Интернет...................................................... 3

Доменное имя.......................................................................................................................................... 3

Унифицированный указатель ресурсов...................................................................................... 3

Протоколы.................................................................................................................................................. 4

Поисковые системы в Интернет.................................................................................................... 4

Программа-браузер.................................................................................................. 4

Структура окна...................................................................................................................................... 4

Понятие тэга, виды тэгов. Структура документа.................................. 5

Свойства тэгов:................................................................................................................................... 5

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

Обязательные ТЭГИ.............................................................................................................................. 5

Форматирование текста......................................................................................... 6

Параметры абзаца................................................................................................................................. 6

Параметры шрифта................................................................................................................................. 6

Заголовки.................................................................................................................... 6

Горизонтальная линия............................................................................................ 7

Размер, вид и цвет шрифта................................................................................ 7

1. Размер шрифта................................................................................................................................... 7

2.   Цвет шрифта...................................................................................................................................... 7

3. Вид шрифта.......................................................................................................................................... 7

Фон страницы.............................................................................................................. 8

Принудительный переход на новую строку........................................................................... 8

Графика на страничке............................................................................................ 8

Атрибуты:.................................................................................................................................................. 8

Бегущая строка......................................................................................................... 8

Списки........................................................................................................................... 9

1.  Нумерованные списки:................................................................................................................ 9

2.  Маркированные списки:.............................................................................................................. 9

Гиперссылки.............................................................................................................. 10

Переход внутри одного документа........................................................................................... 10

Переход к другому документу.................................................................................................... 10

Переход из одного документа к метке другого.............................................................. 10

Таблицы....................................................................................................................... 10

Атрибуты команды TABLE................................................................................................................ 11

Основные понятия

1.      Провайдер - организация, имеющая свой узел в Интернет и предоставляющая возможность другим поль- зователям подключаться к сети через этот узел.

2.      Гиперссылка – выделенный объект, связанный с другим объектом и реагирующий на щелчки мыши.

3.      Гипертекст – документ, содержащий гиперссылки.

4.      HTML – язык написания гипертекстовых документов.

5.      Web-сайт, Web-странички – группа HTML-документов, объединенных по смыслу и имеющих одно дизайнерское решение.

6.      Браузер – программа, позволяющая получать из Интернета различные документы, просматривать и ре- дактировать их содержимое.

Адресация компьютеров в сети Интернет

1.      Каждый ПК в сети имеет свой числовой адрес (IP-адрес)

194.85.160.050

2.      Для удобства работы он преобразуется в Символьный адрес (доменное имя); domain - область (англ.)

Доменное имя

Пример: de.ifmo.ru

В области (домене) ru (Россия) есть область ifmo, в которой, в свою очередь, есть компьютер с именем de. ifmo - аббревиатура: institute of fine mechanics and optics - институт точной механики и оптики.

de - аббревиатура: distance education - дистанционное обу- чение.

Служба доменных имен (DNS - Domain Name Service)

Обеспечивает преобразование символьного адреса (доменного имени) в числовой IP-адрес. Компью- теры, выполняющие такие преобразования, называются DNS-серверами.

Унифицированный указатель ресурсов

Вводя URL (URL - Uniform Resource Location)в строке адреса в браузере, пользователь может просматривать ресурсы Интернета.

URL содержит:

§  информацию о протоколе, по которому передается ресурс (документ, файл);

§  доменное имя компьютера, на котором данный ресурс расположен;

§  адрес файла с ресурсом на этом компьютере (путь к нему).

Например, http://www.intel.com/news/index.html

Протоколы

Протоколы - единые правила передачи информации.

1.            В сети Интернет действует международный протокол TCP/IP, принятый в 70-е годы.

2.            Для передачи данные разбиваются на пакеты (блоки) строго определенной длины. Каждый пакет имеет заголовок и снабжен служебным уведомлением. В случае ошибки можно повторить передачу только нужного пакета. На другом ПК должен быть установлен такой же протокол.

3.            При выходе из строя любого узла пакеты данных просто пересылаются по другому маршруту.

Поисковые системы в Интернет

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

Программа-браузер

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

Существует много различных программ-браузеров, разработанных разными фирмами: Google, Internet Explorer (фирма Microsoft) - два самых известных и широко распространенных браузера. Обладают наиболь- шими возможностями для отображения web-документов.

Программа Internet Explorer

Структура окна

Назначение кнопок Панели инструментов:

«Назад» и «Вперед» – перемещение по просмотренным документам.

«Обновить» – получить документ заново.

«Домой» – возвращает на стартовую страницу.

«Поиск» - открывает окно для поиска в текущем документе.

«Печать» – текущей страницы на принтере.

«Избранное» – перейти к создаваемому пользователем списку адресов

«Останов» (или клавиша ESC) – прервать загрузку документа.

Строка состояния содержит сообщения об адресах источников информации, процессе загрузки, готовно- сти запрошенного документа и т.д.

Понятие тэга, виды тэгов. Структура документа.

Документ HTML - текст, в котором встречаются флаги разметки или тэги.

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

Свойства тэгов:

1.      Тэги бывают непарные (автономные) и парные (контейнеры):

-        непарный тэг вызывает одноразовое действие там, где он встречается. Например, <br> служит для пе- рехода на следующую строку;

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

<b>Жизнь</b> отображает слово Жизнь полужирным шрифтом.

2.      Прописные и строчные буквы в написании тэгов значения не имеют. <title> и <TITLE>.

3.      Незнакомые и написанные с ошибкой тэги браузером игнорируются.

4.      При отображении HTML-документа сами тэги не отображаются.

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

Обязательные ТЭГИ

Действие браузера при отображении текста:

1.      Элементы на экране отображаются последовательно (вниз и вправо);

2.      Любое число стоящих рядом пробелов заменяется одним пробелом;

3.      Вычисляется размер просматриваемого окна и текст делится на строчки по пробелам;

4.      Если текст не помещается в окне, появляется вертикальная полоса прокрутки;

5.      При изменении размеров окна, все повторяется сначала.

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

Форматирование текста

Параметры абзаца

Клавиша Enter в программе IE не устанавливает новый абзац. Чтобы разбить текст на абзацы су- ществует тэг – параграф

<p> форматируемый текст </p>.

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

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

Параметры шрифта

Комментарии – дополнительная информация, служащая для пояснения, браузером игнорируется.

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

Заголовки

Заголовки служат для выделения логических частей текста. Переносы в заголовках недопустимы. Для заго- ловка служит тэг <Hn>…</Hn>, где n может быть целой цифрой от 1 до 6.

Чем больше цифра, тем меньше размер букв.

Тэг Заголовок отменяет выравнивание тэга параграфа.

В тэге заголовка можно устанавливать выравнивание с помощью атрибута align

Пример:

<H2 ALIGN=CENTER>Мир </H2>

Горизонтальная линия

Линия – простейший объект, который умеет строить браузер. Задается тэгом <hr>. Тэг не парный. Линия всегда размещается на отдельной строке.

Атрибуты:

Толщина- <hr size=x>, где х - толщина в пикселях;

Цвет <hr color=#654344>;

Длина <hr width=x>,где х – размер в процентах или в пикселях (по умолчанию длина на всю строку)

Выравнивание <hr align=left> - по умолчанию выравнивание по центру.

ПРИМЕР <hr size=8 width=50% align=center color=#ff0000>

<hr size=2 width=30% align=left color=#ffcc00>

<hr size=1 width=70% align=right color=#cc00cc>

<hr size=5 width=300 align=center color=#0000ff>

Размер, вид и цвет шрифта

Используя тэг Font с атрибутами можно установить размер и цвет шрифта.

1. Размер шрифта

По умолчанию в каждом текстовом редакторе установлен свой размер шрифта. В браузерах по умолчанию используется значение 3.

Изменить размер шрифта относительно установленного по умолчанию можно используя тэг font с атрибу- том size:

<font size=+n> текст </font> - увеличить;

<font size=-n> текст </font> - уменьшить,

где n – число пунктов (1 пт=0,353 мм – англ., 1пт = 0,375мм – русские).

2.   Цвет шрифта

Атрибутом Color можно указать цвет шрифта двумя способами:

-          используя английское название цвета: red – красный, blue – синий;

-          все цвета на ПК получаются путем смешивания трех цветов: красного, зеленого и синего. Можно указать в числовом виде каждый из этих оттенков, где на каждый цвет отведено две позиции ККЗЗСС, само число задается шестнадцатеричной цифрой.

Например: 0000FF – красный и зеленый цвета = 0, а синий цвет – максимальный.

3. Вид шрифта

Атрибут Face позволяет задавать вид (гарнитуру) шрифта. Значением атрибута должно быть название од- ного из шрифтов, установленных на компьютере.

Форма записи: <FONT face="название шрифта"> Текст </font>

Например, <FONT face=Arial Black> Текст </font>. Название шрифта удобно копировать из любого тек- стового редактора.

-  его можно изменить элементом BASEFONT - Базовый шрифт.

Тэг <center> …</center> - выполняет то же действие, что и <p align=center>

Фон страницы

У тэга <Body> есть несколько атрибутов:

bgcolor – цвет фона страницы

text – цвет всего текста на странице

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

<body background = «имя файла.расширение»>.

Пример: <body bgcolor=red text=black> - фон – красный, текст – черный.

Если внутри страницы нужно изменить цвет какого текста, это можно сделать с помощью тэга <font color=red> … </font>

Принудительный переход на новую строку.

При установке нового абзаца тэгом <p> следующий абзац начинается с небольшим интервалом. Если нужно написать текст без интервала, но при этом перейти на следующую страницу, можно использовать тэг <br>. Этот тэг не имеет парного закрывающегося тэга, просто текст, который стоит после него, перехо- дит на новую строку.

Графика

На странице можно использовать рисунки. Для этого они должны быть сохранены в отдельных фай- лах. Рекомендуется для хранения рисунков создавать специальную папку Images или Pic в папке, где запи- сан основной файл Index.htm. Файл с рисунком может иметь расширение JPG или gif (движущаяся кар- тинка или картинка с прозрачным фоном).

1.  Рисунок на страничке:

<img src=«имя файла.расширение»> - из текущей папки.

<img src=./images/«имя файла.расширение»> - из папки images.

Атрибуты:

alt= «текст надписи» - подпись вместо картинки (пока она выводится на экран) или при наведении на нее указателя

border = 5 – рамка толщиною в 5 пикселей вокруг картинки. Если значение =0 рамка отсутствует.

width = 500 – ширина картинки (в пикселях или в % к величине экрана) height = 300 – высота картинки (в пикселях или в % к величине экрана) align = left – расположение текста по отношению к картинке слева align = right – расположение текста по отношению к картинке справа align = top – верхний край

align = middle – по центру

align = bottom – по нижнему краю

vspace=10 – расстояние от картинки до текста по вертикали

hspace=30 – расстояние от картинки до текста по горизонтали

Бегущая строка

Бегущая строка

<MARQUEE> – начало бегущей строки Фрагмент текста, картинки или любые другие объекты между этими тэгами будут двигаться так, как определят атрибуты. </MARQUEE>– конец бегущей строки

Атрибуты тэга <MARQUEE>

1.      WIDTH = ширина области бегущей строки в пикселях или в % от высоты экрана

2.      BGCOLOR = определяет цвет фона бегущей строки. Определяет направление бегущей строки

3.      DIRECTION =LEFT

DIRECTION =RIGHT

4.      LOOP = n – n раз

LOOP =INFINITE – бесконечное число (по умолчанию)

5.      Определяет количество "прокруток" бегущей строки

Позволяет разместить текст в верхней, средней или нижней части области бегущей строки.

ALIGN = TOP ALIGN = MIDDLE ALIGN = BOTTOM ALIGN = SCROLL

6.      BEHAVIOR = SLADE

BEHAVIOR = ALTERNATE

Определяет режим вывода ("поведения") бегущей строки: прокрутка циклическая, выход и остановка и прыжки соответственно.

7.      SCROLLAMOUNT = скорость перемещения текста или графики в строке [1…3000]

8.      HIGHT=высота бегущей строки (в пикселях или в % от высоты экрана )

9.      HSPACE= ширина в пикселях левого и правого полей между областью бегущей строки и окружающим её текстом или графикой

10.  VSPACE= размер отступа в пикселях сверху и снизу от бегущей строки до текста или гра- фики.

Тэг <pre> позволяет сохранить форматирование, установленное в текстовом редакторе.

Списки

Бывают:

1.          Нумерованные – каждый абзац начинается с номера;

2.          Маркированные – абзац начинается с символа.

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

<ol>

</ol>

<li>понедельник

<li>вторник

<li>среда

<li>четверг

Для изменения вида номера нужно использовать атрибут Type. Type = 1 – арабские цифры

Type = А – большие буквы. Type = а – маленькие буквы. Type = I – римские цифры Type = i римские цифры

<ol start=5 type=1> начинать с 5, нумерация арабскими цифрами.

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

<ul>

<li>понедельник

<li>среда

<li>четверг

</ul>

Для изменения вида маркера нужно использовать атрибут Type.

<ul type=disk> - точка

<ul type=circle> - окружность

<ul type=sguare> - квадрат

Гиперссылки

Предназначены для перехода на другие документы или на новое место в данном документе. Ссылкой может быть текст (слово, фраза, буква) или рисунок. Как правило, текстовые ссылки выделяются цветом и подчеркиванием. При наведении на нее указателя, он меняет форму на «руку».

Для ухода по ссылке – щелчок по ней. Для возврата в окно документа – кнопка «Назад» в браузере.

Ссылки могут быть: внутри одного документа; на другие документы.

Переход внутри одного документа

1.     Выбрать уникальное имя для метки. Имя можно разместить в кавычках. Если в имени метки есть про- белы, кавычки обязательны.

2.     Указать в месте перехода

<A href = #метка> текст </A>.

# - ключевой символ

-  метка – выбранное имя для метки

-  текст – запись, которая будет выглядеть как ссылка.

3.     Установить тэг с меткой в нужном месте программы:

<A name = метка> </A>.

При этом имя метки должно быть таким же, но без символа #.

Переход к другому документу

<A href = имя файла> текст </A>.

Пример: <A href = page1.htm> Репка </A>.

Переход из одного документа к метке другого

Первый файл:           <A href = имя файла #метка> Текст </A>.

при этом на экран выводится слово Текст, которое является ссылкой.

Второй файл: <A name = метка> </A>.

ВНИМАНИЕ!! Если в тэге А указано только имя файла, браузер ищет его в той же папке, в которой распо- ложен и файл со ссылкой. Если же файл, на который ссылаемся, находится не в этой папке, то нужно ука- зывать полный путь к файлу с именем диска или путь по отношению к файлу со ссылкой.

Таблицы

Атрибуты команды TABLE

Варьируя атрибутами команды TR, можно установить свойства одновременно для всех ячеек строки.

Каждая табличная строка состоит из ячеек, которые последовательно описываются командами TD (обыч- ная ячейка) и (или) TH (ячейка-заголовок). Команды TD и TH имеют следующие атрибуты:

Скачано с www.znanio.ru