– слайды 3-12
Урок 2. Ввод и форматирование текста Web-страницы

– слайды 13-22
Урок 3. Специальный текст и символы – слайды 23-28
Урок 4. Графика на Web-страницах – слайды 29-34
Урок 5. Гиперссылки на Web-страницах – слайды 35-41
Урок 6. Таблицы – слайды 42-49
Приложения –
Литература –

язык гипертекстовой разметки) является языком программирования, предназначенным для разработки

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

На содержание

1989 году в Женеве, Швейцария. Придумал мировую паутину Тим

Бернес-Ли. Создание WWW не было для Тима внезапным озарением. Еще в 1980 году им была разработана для личного использования система маркирования гипертекста Enquire – ранний прототип HTML.
У HTML был еще более ранний предшественник – GML (Generalized Markup Language – язык обобщенной разметки), разработанный Чарльзом Гольдфардом в 1969 году. В 1986 году этому языку, переименованному в SGML (стандартный GML), был присвоен статус международного стандарта. Язык HTML создавался Тимом Бернес-Ли в соответствии со стандартами SGML. Но идея гиперссылок и URL-адресов в стиле структуры доменных имен www. имя. имя. была впервые реализована именно Тимом Бернес-Ли.
С тех пор язык HTML много раз был модифицирован, особенно в 90-тые годы, когда Интернет развивался наиболее динамично.

На содержание

(например, Блокнот). Введите в текстовый файл HTML-код, а затем

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

На содержание

нужно в контекстном меню выбрать команду Открыть с помощью…->

Блокнот или Просмотр HTML-кода.
Если вы хотите изменить HTML-код, внесите необходимые изменения в исходный HTML-документ, сохраните его (Файл->Сохранить), затем обновите Web-страницу (Вид->Обновить или нажмите клавишу F5 или значок на панели инструментов)

На содержание

устанавливаются в начале и конце документа.
… -

заголовок Web-страницы.
… - основной раздел Web-страницы.
Дескрипторы бывают парные и непарные. Обязательные дескрипторы – парные: открывающие (< HTML>) и закрывающие (). Отсутствие закрывающего дескриптора может вызвать ошибку при просмотре Web-страницы.

На содержание

устанавливаемые в заголовке (между тегами … )
…

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

На содержание

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

элементов Web-страницы. Эти дескрипторы также бывают как парные (например,

…

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

На содержание

Блокнот) и сохраните документ с расширением .html (Файл ->

Сохранить как… ->укажите тип файла Все файлы ->имя документа proba. html)
Введите HTML-код из примера.
Сохраните документ (Файл -> Сохранить) и закройте его.
Найдите сохраненную Web-страницу, откройте ее, обновите и посмотрите, что у вас получилось.

Я хочу сделать Web-страницу

На содержание

меню и выберите команду Просмотр HTML-кода).
Внесите изменения в

основной раздел Web-страницы (измените текст между дескрипторами … ).
Сохраните изменения (Файл -> Сохранить) и обновите Web-страницу.

Поздравляю с успешным началом!

На содержание

пробелы и разрывы строк, заданные в текстовом редакторе. Абзацы,

введенные в Блокноте, объединяются в сплошной текст в окне обозревателя. Поэтому, чтобы разметить текст Web-страницы, следует воспользоваться специальными дескрипторами HTML.

На содержание

по центру
Выравнивание по правому краю
Выравнивание по ширине

Этот текст не будет переноситься на другую строку, даже если его длина больше ширины окна

Для создания абзаца используется пара блочных дескрипторов

…

в основной раздел Web-страницы (между дескрипторами … ).
По умолчанию текст выравнивается по левому краю, слова автоматически переносятся, когда текст достигает края окна обозревателя. Изменить выравнивание можно с помощью атрибута ALIGN в дескрипторе

.
Дескриптор … , вставленный между тегами

…

блокирует автоматический перенос слов.

Вставьте листинг в основной раздел вашей Web-страницы и посмотрите, что у вас получилось.

На содержание

используется непарный дескриптор
. Обозреватель покажет текст с новой

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

Пробелы и отступы текста

Если вы хотите сохранить форматирование текста из Блокнота, воспользуйтесь парой

…

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

…

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

На содержание

дескрипторами … строфу из стихотворения «Зеленый шум»:
Люби, покуда любится,
Терпи,

покуда терпится,
Прощай, пока прощается,
И - Бог тебе судья!
Н. А. Некрасов
Проверьте, что у вас получилось.
Задание 2. Вставьте в конце каждой строки дескриптор
. Проверьте, как изменился вид документа.
Задание 3. Вставьте перед именем автора три символа  . Посмотрите, как теперь выглядит текст. Добавьте еще необходимое количество символов.

На содержание

дескрипторов от … до …, причем размер заголовка уменьшается

с каждым уровнем. Дескрипторы заголовков устанавливаются в «тело» Web-страницы и имеют больший приоритет для поисковых программ, таких как Yahoo, Rambler или Яндекс. Поэтому, чем четче заголовок будет выражать суть Web-страницы, тем больше вероятность того, что ваш документ будет найден в Интернете.

Заголовок первого уровня

Заголовок второго уровня

Заголовок третьего уровня

Заголовок четвертого уровня

Заголовок пятого уровня

Заголовок шестого уровня

Вставьте листинг в вашу Web-страницу и посмотрите, что у вас получилось.

На содержание

его размер и цвет.
Шрифт выбирается с помощью параметра FASE.

В значении параметра следует указать имя шрифта или нескольких шрифтов. Например:
текст
Число шрифтов в списке не ограничено, но некоторые из них могут отсутствовать на компьютере пользователя. Поэтому обязательно указывайте распространенные шрифты. Обозреватель будет применять шрифты в том порядке, как они записаны.
Размер шрифта устанавливается с помощью параметра SIZE, значение которого меняется от 1 до 7. Например:
текст
Шрифт увеличивается при увеличении размера.

На содержание

способами:
с помощью параметра COLOR в дескрипторе ;
с

помощью параметра TEXT в дескрипторе .
Значение цвета в обоих случаях устанавливается одинаково: либо с использованием шестнадцатеричного кода, либо с помощью именного кода.
Цвет фона устанавливает параметр BGCOLOR в дескрипторе

На содержание

полужирный шрифт;
… - курсив;
… - подчеркивание;
- сохраняет форматирование

исходного текста;
^… - надстрочный символ;
_… - подстрочный символ.
Текст для форматирования помещается непосредственно между дескрипторами пары. Например, создадим запись: х2-3х+2=0, корни этого уравнения – х1=1, х2=2.
x₂-3x+2=0, корни этого уравнения –x¹=1, x²=2
Введите листинг в вашу Web-страницу. Удобнее сначала набрать весь текст, а затем расставьте необходимые дескрипторы.

На содержание

параметры BGCOLOR=‘yellow’ TEXT=‘blue’
текст

страницы
Измените значения параметров, пользуясь таблицей цветов. Посмотрите, как изменится вид Web-страницы.
Задание 2. Введите в документ proba.html между дескрипторами

…

листинг:
Шрифт 1

Шрифт 2

Шрифт 3

Шрифт 4

Шрифт 5

Шрифт 6

Шрифт 7

Измените значения параметров. Посмотрите, как изменится вид Web-страницы.

На содержание

…, задающие начало и конец списка и …, устанавливающие

начало и конец каждого пункта.

Способ нумерации устанавливается c помощью атрибута TYPE в дескрипторе

…

Начальный номер пунктов устанавливается c помощью атрибута START в дескрипторе

…

Если нужно пропустить часть номеров и продолжить нумерацию с другого номера, то это можно сделать c помощью атрибута VALUE в дескрипторе

…

, присвоив ему нужный номер

На содержание

используются теги …, а каждая строка списка - также

тегами

…

.
Тип маркера устанавливается значением атрибута TYPE, который может принимать следующие значения:

маркированный список

• окружность


• круг


• квадрат

На содержание

список внутрь другого. Попробуйте сделать это самостоятельно.
Создание отступов
Отступ от

левого края создается с помощью следующих тегов:

…

начало и окончание списка определений;

…

заголовок термина;

…

определение термина;

 

пустая строка;

текст абзаца

красная строка

На содержание

… . Текст, расположенный между этими тегами, можно форматировать

так же, как обычный текст.
Атрибуты этого дескриптора:
BEHAVIOR способ выполнения эффекта бегущей строки
scrool текст исчезает за краем страницы;
slide текст остается у левого края страницы;
Alternate направление перемещения текста меняется на противоположное;
BGCOLOR цвет фона бегущей строки;
DIRECTION направление перемещения текста;
left влево;
right вправо;
HEIGHT высота бегущей строки;
WIDTH ширина бегущей строки;
HSPASE отступ от полей страницы;
LOOP число показов текста
любое целое число, указывающее число повторов;
Infinite бесконечное повторение.

На содержание

и со временем разработчик может забыть назначение отдельных блоков.

Кроме этого, без комментариев достаточно сложно разобраться в коде постороннему человеку. Поэтому рекомендуется помечать блоки кодов специальными командными символами . Текст, расположенный внутри комментария, не отображается в окне обозревателя и не меняет внешний вид страницы.


параметры страницы
текст страницы

На содержание

формата графических файлов:
JPEG – для высококачественных полноцветных изображений, фотографий

*.jpg;
GIF – для рисунков, содержащих текст, линии, фигуры и одноцветные области. В этом формате также сохраняются кнопки, логотипы, анимированные рисунки.
PNG – альтернатива двум первым форматам. Этот формат можно использовать во всех вышеперечисленных случаях, но он поддерживается не всеми обозревателями.

На содержание

тег . Атрибуту SRC присваивается путь к

файлу на диске или URL-адрес файла рисунка в Интернете. Если рисунок находится в другой папке, то в ссылке указывается также имя папки.
По умолчанию рисунок отображается без границ. При желании границы можно сделать видимыми с помощью атрибута BORDER, присвоив ему значение толщины границы в пикселях. BORDER=‘0’ – границы нет.
Рисунки замедляют выгрузку Web-страницы, поэтому существуют специальные приемы, занимающие внимание пользователя на время выгрузки. Например, можно создать две копии рисунка: с высоким и низким разрешением и использовать атрибут LOWSRC: . При загрузке сначала появится файл с низким разрешением, который потом заменяется файлом с высоким разрешением. Атрибут ALT может снабдить рисунок альтернативным текстом, появляющимся вместо незагрузившегося рисунка.

На содержание

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

в пикселях или в процентах от истинного размера рисунка. Можно одному из изображений задать значение auto, чтобы пропорции рисунка сохранялись.
Выравнивание рисунка относительно текста задает атрибут ALIGN, принимающий значения:
left – рисунок слева от текста;
right – рисунок справа от текста;
top – текст выровнен по верхнему краю рисунка;
middle – текст выровнен посередине;
botton – текст выровнен по нижнему краю рисунка.
Отступ текста от рисунка управляется атрибутами HSPASE и VSPASE в пикселях– слева и справа, над и под рисунком. Все атрибуты устанавливаются в дескрипторе

На содержание

в дескрипторе атрибут BACKGROUND, указав в его значении

адрес расположения рисунка.

При этом выбранный рисунок замостит область окна обозревателя.
Чтобы зафиксировать фон (не давать ему прокручиваться), можно установить атрибут BGPROPERTIES=‘fixed’ в дескрипторе

myimg.gif

На содержание

выравнивание фотографии относительно текста.
Улучшите внешний вид страницы, добавив рисунки,

анимацию, горизонтальные и вертикальные линии, рамки и т.п.
Сохраните web-страничку, дав ей имя (например, avtor.html)

Вот и готова твоя первая авторская страница!

На содержание

присваивается следующие значения:
гиперссылка



На содержание

ссылки,
alink - цвет активной ссылки (нажатой),
vlink

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

На содержание

одной большой картинки таким образом, чтобы каждый элемент рисунка

являлся ссылкой. Распределение ссылок по картинке описывается в тэге IMG.
USEMAP задает имя элемента рисунка map_name.
определяет область на картинке посредством параметров SHAPE и COORDS.
SHAPE – форма области.
default -- стандартная форма
rect -- прямоугольник
circle -- круг
poly -- многоугольник произвольной формы
COORDS – координаты области. Задаются в пикселах. Круг имеет три координаты (центр и радиус), прямоугольник – четыре (координаты противоположных вершин), а для многоугольника вы должны описать каждую его вершину в двух координатах.
HREF=“адрес” – определяет ссылку на схеме

Слайд 39 Вставка звукового файла
Для того, чтобы вставить в вашу

---