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

Содержание
Основные термины
Способы создания веб-страниц
Основные понятия языка Основные понятия языка HTML
Структура веб-страницы
Основные теги
Вставка гиперссылки
Списки
Добавление графики
Таблицы
Фреймы
Итоги

Основные термины
Веб-страница, Веб-страница, HTML,WWW
Сайт
Сервер
Браузер
HTTP
Гипертекст
Гиперссылки

Веб-страница, HTML, WWW
Web-страница (документ HTML) представляет собой текстовый файл на языке HTML формата *.htm или *.html, размещенный в World Wide Web (WWW). Web-страница может содержать текст, гиперссылки, вставки в виде графики, анимации, видеоклипов и музыки.
WWW - Всемирная Паутина, распределенная система доступа к гипертекстовым документам, существующая в Интернете.
Для подготовки Web-страниц к публикации в Интернете применяется специальный язык разметки гипертекста - HTML (Hyper Text Markup Language), дословно с английского "язык маркировки гипертекста". Первую версию HTML разработал сотрудник Европейской лаборатории физики элементарных частиц Тим Бернерс-Ли.

Сайт
Сайт- совокупность WEB-страниц, объединенных тематически.
Сайт должен находиться на веб-сервере (т.е. компьютере, к которому будут обращаться клиенты).
Веб-мастер – лицо, ответственное за поддержание и обновление веб-документов на веб-серверах.

Сервер
Информация хранится на веб-серверах - компьютерах со специальным программным обеспечением, объединенных в сеть Интернет.
Основная функция сервера - найти веб-документ по запросу клиента (браузера).
Серверы имеют большой объем дискового пространства и оперативной памяти, а также высокое быстродействие. Они работают 24 часа в сутки 7 дней в неделю.

Браузер
Для просмотра веб-документов используются специальные программы - так называемые браузеры, программы интерпретаторы с языка HTML. Наиболее распространены Internet Explorer, Opera, Mozill, Firefox, Netscape Navigator.
Браузер посылает по сети запрос серверу, хранящему файл с необходимым документом. В ответ на запрос сервер высылает браузеру требуемый файл или сообщение об отказе, если файл по некоторым причинам недоступен.

HTTP
Любой протокол - это набор правил, которые используются компьютерами для обмена информацией.
Среди протоколов Интернета самый распространенный - HTTP (Hyper Text Transfer Protoсol -протокол передачи гипертекста).

Гипертекст
Термин «гипертекст» был впервые введен около двух десятилетий назад Томом Нильсоном, и он означал нелинейно организованный текст.
Гипертекстом называется совокупность связанных гиперссылками текстов.

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

Первый способ: воспользоваться специальными программами для написания web-страниц.
Для этой цели существуют специальные программы: MS FrontPage или Macromedia DreamWeaver, Allaire HomeSite или 1st Page 2000
Самый простой способ: Microsoft Word.
Вы просто пишете в Word свою страницу, связываете гиперссылками, а потом сохраняете в виде HTML. Этот способ не очень хорош даже для создания простеньких страничек, т.к. занимает много места.
Способы создания веб-страницы

Web-страницу можно написать в простом текстовом редакторе типа блокнот. Для того, чтобы файл воспринимался как web-страница, надо сохранить с расширением .htm или .html, и тогда он будет открываться интернет-браузером.
Для редактирования Web-страницы в Блокноте во время ее просмотра в браузере, используется пункт меню Вид-В виде HTML.
После редактирования в Блокноте для просмотра отредактированной страницы надо нажать клавишу F5 или кнопку "Обновить" на панели инструментов.
Если у вас нет никаких специальных программ для создания web-страниц, то:

Этапы создания веб-страницы в блокноте:
В своей папке создать отдельную папку для файлов.
Открыть программу БЛОКНОТ.
Написать в нем текст WEB-страницы.
Сохранить этот текст в папке под любым именем с расширением .html.
Затем перейти в папку.
Документ должен иметь значок или
Открыть этот документ. (Откроется программа-браузер).
Если нужно внести изменения в документ, то выполнить команду ВИД⇨Просмотр HTML-кода (Исходный текст). Текст WEB-страницы откроется в блокноте.
Внести в текст изменения. Сохранить его, перейти в программу-браузер и нажать кнопку ОБНОВИТЬ

ТЕГ
Тег – код языка HTML, с помощью которого выполняется разметка исходного текста.
Теги записываются в угловых скобках, например:
Закрывающий тег всегда снабжается косой чертой:
Теги бывают парные (открывающий и закрывающий ) и непарные (одиночные, только открывающие).

Контейнер
Контейнером называется парный тег, внутри которого могут располагаться другие теги или текст, графика и т.д.
Контейнер требует закрывающего тега.
Таким образом, контейнер состоит из открывающего и закрывающего тега.
Например,
…
…
…
Здесь два контейнера – html и title.
Контейнеры должны быть вложенными.

Атрибуты
Теги могут иметь атрибуты со значениями. С их помощью можно указать цвет текста, его размер, расположение по отношению к рисунку и т. д. Атрибуты отделяются от тега пробелами.
Атрибуты имеются только у открывающих тегов.
У закрывающих тегов атрибутов нет.
Например,
- тег начала абзаца,
- тег начала абзаца, выровненного по центру окна. Здесь атрибут- align, а значение- center.

Структура HTML-документа
Структура html- это базисные тэги (все документы на HTML должны содержать эти тэги):
- документ написан на языке HTML
- открыть строку заголовка
- название документа<br>
- закрыть строку заголовка
- открыть тело документа (содержимое документа)
- закрыть тело документа
-закрыть html-документ

Мой первый шаг
Здравствуйте, это моя первая страница.
Добро пожаловать!
Структура HTML-документа

Теги форматирования абзацев
Тег
указывает на начало нового абзаца и вставляет пустую строку перед абзацем.
Атрибут align, значения left, right, center, justify.
Тег
- разрыв строки. Используется для записи текстов стихов и песен.
Тег
…
выделяет часть исходного текста, который должен отображаться «как есть» - с теми же отступами и разбиением на строки. Используется для записи текстов программ. Внутри этого тега могут располагаться гиперссылки, картинки и пр.
Тег
…
- содержимое выравнивается по центру – текст, рисунки, таблицы. Аналог атрибута align=center
-выравнивание по левому краю
-по правому краю
-по ширине
-по центру
В лесу родилась ёлочка
В лесу она росла

Заголовки
Существует 6 уровней заголовков:
. . .
, …,
. . .
h1-самый крупный заголовок,
h6- самый мелкий.
Атрибут данного тега: align – выравнивание
Значения: left right center
Title 1
Title 2
Title 3
Title 4
Title 5
Title 6

Теги форматирования шрифта – размер, цвет и тип шрифта
Тег
…
- изменяет размер, цвет и тип шрифта.
Атрибуты:
size - задает размер фрагмента текста от 1 до 7.
...
color - задает цвет фрагмента текста. Цвет задается словом или кодом RGB
...
...
face - задает тип шрифта.
...
Если надо задать сразу размер,цвет текста и тип шрифта, то эти атрибуты пишутся сразу за тегом FONT:
...
Размер увеличивается от 1 до 7. По-умолчанию size=3
Размер изменяется на 20%: 4 размер больше 3 на 20%, 5 размер больше 4 на 20%
size=4 – абсолютный размер,
size= +1 – относительный (на 1 больше, чем базовый размер шрифта)

Теги форматирования символов текста
- полужирного шрифта;
- курсива;
- идентификатор выделенного шрифта;
- подчеркивания;
- перечеркивания;
- равноширинного шрифта (телетайпного или курьера);
- задает увеличенный размер шрифта;
- задает уменьшенный размер шрифта;
- задает нижний индекс;
- задает верхний индекс;
- мерцающий текст.
Можно комбинировать теги стилей:
Полужирный курсив

Атрибуты тега BODY
Цветовая схема всего HTML-документа определяется при помощи специальных атрибутов тега :
Bgcolor – изменяет цвет фона.
Text – задает цвет текста.
Background – помещает в качестве фона
изображение из файла.
фоновое изображение из файла «Зима.jpg».
Link – задает цвет гиперссылок, по которым пользователь еще «не ходил».
Vlink – задает цвет посещенных гиперссылок.
Alink – цвет активной гиперссылки

Создание бегущей текстовой строки
Добро пожаловать!
-текстовая строка должна бежать влево
Атрибуты тега: behavior
scrollamount (скорость)
Как прекрасно жить на свете!
-текстовая строка должна бежать то влево, то вправо со скоростью =15.

Гипертекстовая ссылка
Гиперссылка привязывается к какому-либо элементу страницы, по щелчку на который происходит перемещение в указанное место.
Гиперссылка задаётся тегом
с параметром href и выглядит так:
текст или объект ссылки
Местом назначения может быть файл. Надо указать путь к файлу и его название с расширением. Файл может быть любым -текстовый, другая страница, картинка, презентация, аудиофайл, файл .exe и т.д.
Например,
мои друзья
- гиперссылка, переход к файлу “friends.html”- веб-странице о друзьях.
отчёт
-ссылка на текстовый файл “otchot.doc"
презентация
-ссылка на презентацию «семья.ppt»

Местом назначения может быть адрес сайта:
БГУ
- ссылка, переход к сайту БГУ.
моя почта
- ссылка на адрес электронной почты [e-mail]
- ссылка на рисунок
Перейти к разделу 1
Ссылка на определенное место в текущем документе.
Гипертекстовая ссылка

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

Атрибуты нумерованного списка
start=“число“ устанавливает номер списка, с которого начинается нумерация
Type=”тип” устанавливает тип номеров в списке
В тэг
можно вставлять атрибуты
Type=”тип” и value=“число“

Пример использования атрибутов нумерованного списка:
Список предметов, начиная с 5
История
Математика >Физика
Информатика
Список с использованием букв
История
Математика
Физика
Информатика
Список с римскими цифрами
История
Математика
Физика
Химия

Атрибуты маркированного списка:
Список предметов
История
Математика
Физика
Информатика
Смешанный список
История
Математика
Физика
Информатика type="circle">Переделанный список из ol в ul
10
11
12
13
Disc • (по умолчанию), Circle ⚪, Square ◻

Используются для:
Словарей;
Списка типа имя / значение;
Создания маркеров элементов списка.
Списки определений устроены как статьи в толковом словаре, которые могут быть заполнены текстом и картинками.
Тэг
…
заголовок списка
Каждый элемент списка состоит из двух частей – термина и определения:
- термин
- определение или объяснение
Списки определений

Флегматик
Пассивный, очень трудоспособный...
Сангвиник
Активный, энергичный...
Холерик
Порывистость и сила эмоциональных реакций...
Меланхолик
Пассивный, легко утомляющийся...
Пример использования списков определений:

ДОБАВЛЕНИЕ ГРАФИКИ НА ВЕБ-СТРАНИЦУ

Вставка графического изображения
вставка картинки из файла «Цветы.gif».
Обычно файлы с картинками помещают в ту же папку, что и сама страница или в отдельную папку:
Атрибут width задает ширину изображения в пикселах.
Атрибут height задает высоту изображения в пикселах.
Значения можно указывать в % по отношению к окну.
width = “100%” height= 20 – полоса на все окно шириной 20 пикселей.
Обратите внимание на формат изображения!
Файл “Цветы.gif” находится в папке “Фото”

Современные браузеры могут работать с различными форматами изображений, но наиболее предпочтительные –
Для фотографий лучше использовать формат JPEG,
для рисунков и пиктограмм - GIF
.GIF
.JPEG

GIF – (Graphics Interchange Format)
формат обмена графикой.
Преимущества:
Кодировка платформенно-независима (Windows, Macintosh, Unics).
При создании файла применяется особая технология сжатия, которая существенно сокращает его размер, что очень ускоряет передачу его по сети.
GIF-изображения легко анимировать, использовать прозрачность и всплывание.
Недостаток: ограниченный набор цветов.
Используется для пиктограмм и небольших картинок.
7 Кб
159 Кб
113 Кб

JPEG - (Joint Photographic Expert Group) – организация по стандартизации
Преимущества:
Кодировка платформенно-независима (Windows, Macintosh, Unics).
При создании файла применяется особая технология сжатия, которая существенно сокращает его размер, что очень ускоряет передачу его по сети.
Поддерживает десятки тысяч цветов
37 Кб
20 Кб

align – выравнивание. Положение изображения лучше всегда указывать явно.
Значения:
left, right – по левому или по правому краю.
top – верхняя граница изображения устанавливается на уровне верхнего края самого высокого элемента в строке.
middle – середина изображения выравнивается с серединой строки.
bottom – (по умолчанию) нижний край изображения выравнивается с базовой линией текста.
hspace, vspace – задают расстояние в пикселях между картинкой и текстом по вертикали и горизонтали.
Атрибуты тега IMG:

Обтекание изображения текстом
width=50% vspace=10 hspace=10>
Душный зной над океаном,
Небеса без облаков;
Душный зной над океаном,
Небеса без облаков;
ALIGN=LEFT
Если в тэге
не указывать атрибут align=left или right, то текст на сайте располагается следующим образом:

Центрирование изображения
Выровнять изображение по центру можно тэгами абзацев:
1 способ:
Текст
Текст
2 способ:
Текст
Текст

Можно поместить картинки одновременно по обеим сторонам документа. В этом случае картинки задаются перед текстом.
В зоопарке было множество диких зверей…

Если выводятся несколько картинок с одинаковым выравниванием (left или right), то следующее изображение позиционируется относительно предыдущего.
Байкал
Небоскрёбы
Пингвин

Использование видео
Корректно работает только в Internet Explorer
Атрибут dynsrc тэга
позволяет вставлять видео .avi в документ.
Браузер выделяет прямоугольную область в окне документа и проигрывает в ней видео. Некоторые браузеры могут неправильно среагировать на dynsrc. Поэтому рекомендуется в тэг
дополнительно включать атрибут со ссылкой на картинку.

Управление проигрыванием
Клип начинает проигрываться 1 раз сразу после загрузки документа. Для изменения параметров проигрывания видео используются следующие атрибуты:
Controls (без значения) – добавляет элементы управления.
Loop= число повторений
=Infinite – бесконечно.
Start=mousover - проигрывание при наведении мышки на область видео.
=fileopen – при открытии документа
Start=“fileopen, mousover” – сразу при открытии, а затем при наведении мышки.
Все остальные атрибуты тэга
можно применять также и к видео.

Звуковой фон
Корректно работает только в Internet Explorer.
Тэг
- проигрывает аудиофайл при загрузке содержащего его документа. При обновлении документа проигрывание музыки возобновляется.
Атрибуты:
src="имя файла " - файл с расширением .wav, .midi, .mp3
Loop=количество повторений
=infinite – безконечно.

Вставка объекта
- вставка объекта в документ HTML.
В данном случае это мультимедийный файл “свадьба.avi”, причем при загрузке страницы происходит автозапуск этого файла, размеры которого на экране заданы атрибутами width и height.

Таблицы
Таблица начинается тегом
.
Таблица состоит из строк, каждая из которых разбита на
равное число столбцов.
Строки открываются тегом
.
В строках располагаются ячейки, открываемые тегом описывает заголовки в первой строке таблицы.
Тег - строка таблицы
В этом тэге можно использовать почти все атрибуты,
что и
в тэге таблицы. Но действуют они только в этой строке.
,
.
Пример простой таблицы:
Фамилия
Иванов
Имя
Пётр
Тег
- описывает заголовок таблицы.
Слайд 48
Align- выравнивание таблицы относительно документа. Возможные значения: center, left, right
Valign -
выравнивает текст в таблице по вертикали. Значения: top, bottom, middle, baseline.
background=“имя файла“ строка, определяющая рисунок для заднего фона таблицы
bgcolor =цвет определяет задний фон таблицы
border толщина внешней рамки в пикселях. Если атрибут не указан, то таблица выводится без видимой рамки
bordercolor =цвет цвет рамки
Атрибуты для тега
Слайд 49
title =“Текст“ всплывающая подсказка
width = число ширина таблицы в процентах или
пикселях
height = число рекомендуемая
высота таблицы только в пикселях.
cellspacing = число расстояние
между ячейками
cellpadding = число расстояние
между содержимым и рамкой
colls = число заранее сообщает
браузеру количество столбцов
в таблице.
Атрибуты для тега
Слайд 50
Пример
cellpadding="10" cellspacing="10">
A
>
Слайд 51
- ячейки таблицы с заголовками столбцов
- ячейки таблицы с данными
В этих тэгах тоже можно применять почти все атрибуты таблицы.
Для оформления текста можно использовать все тэги форматирования.
Таблица строится по строкам. Сначала прописываются все ячейки в первой строке, затем – во второй, и т.д.
Атрибуты тегов
и
Слайд 52
Заголовок столбца 1
Заголовок столбца 2
Ячейка столбца 1, ряд 1
Ячейка столбца 2, ряд 1
Ячейка столбца 1, ряд 2
Ячейка столбца 2, ряд 2
Слайд 53
width=150 height=120>
Морской котик
Жирафы
Леопард
Слайд 54
Фреймы
Фрейм - область гипертекстового документа со своими полосами прокрутки. Фреймы позволяют нам
открыть в окне броузера не один, а сразу несколько документов.
Надо указать, сколько документов отобразить, сколько места будет занимать каждый, и каким образом они будут располагаться. Фрейм-документ не содержит тэга body. Вместо него используется тег .
Слайд 55
Пример
Документ делится на 3 строки (rows) Высота первой строки - 100 пикселов, третьего - 150, а второй занимает все оставшееся пространство.
Тэг frame сообщает какие документы будут в каждой строке: 1 строка – Главная.html,
2 строка-Меню,
3 строка-Адреса
Документ делится на 3 столбца (cols) Ширина первого столбца - 100 пикселов, второго - 150, а третий занимает все оставшееся пространство.
Слайд 56
Атрибуты тега < frameset >:
Rows – число и размер строк;
Cols – число
и размер столбцов;
Значения – список величин, определяющий в пикселях или в % значения для строк и (или) колонок.
При помощи rows разбиваем окно на строки и задаем какую высоту будет иметь каждая строка
При помощи cols разбиваем окно на столбцы и задаем какую ширину будет иметь каждый столбец.
Ширину и высоту можно задавать не только в пикселях, но и в процентах от общей ширины (высоты) окна:
Помните, что в сумме это все должно равняться 100%.
Слайд 57
Тег
Может появляться только в теге и определяет содержимое одиночного фрейма.
Атрибуты:
src=“URL”
- обязательный атрибут, указывает имя файла, который должен изображаться в нем.
name=«метка» - связывает с фреймом метку, которая может использоваться для ссылок на фрейм в атрибуте target тега
, таким образом можно изменить содержимое фрейма, используя гиперссылку в другом фрейме.
noresize - запрещает изменение размеров фрейма.
scrolling = yes или no – разрешает или запрещает появление полос прокрутки.
Слайд 58
Вложение тегов
В тег … можно поместить еще один или
несколько тегов .
Это позволяет организовать области с разным количеством строк и столбцов.
2.html
3.html
1.html
Слайд 59
name=“f3”>
2.html
3.html
4.html
1.html
Вложение тегов
Слайд 60
Навигация во фреймах
В каждую область фрейма должен быть загружен HTML- документ.
Если в
нем есть гиперссылки, то они открываются в этом же фрейме.
Для того, чтобы перенаправить вывод документа в другой фрейм, нужно использовать:
Атрибут name в целевом теге
Атрибут target в теге
Слайд 61
Меню:
Ссылка 1
Ссылка 2
Ссылка 3
Ссылка 4
Окно
просмотра
Навигация во фреймах
Слайд 62
Меню:
Ссылка 1
Ссылка 2
Ссылка 3
Ссылка 4
Окно просмотра
Файл menu.html:
…
…
Ссылка 1
Ссылка
2
Ссылка 3
Ссылка 4
…
Щелчок на соответствующей ссылке в левой части выведет документ в правый фрейм.
Навигация во фреймах
Слайд 63
Список цветов:
aqua - бирюзовый; black - черный; blue - синий;
gray - серый;
green - зеленый; lime - ярко-зеленый;
maroon - темно-красный; white - белый; navy - темно-синий;
olive - оливковый; purple - фиолетовый; red - красный;
silver - светло-серый; teal - ярко-голубой; yellow - желтый;
fuchsia - ярко-фиолетовый
brown - коричневый, orange - оранжевый, cyan - оттенок бирюзового,
pink - розовый
Имя файла: Основы-создания-веб-страниц.pptx
Количество просмотров: 436
Количество скачиваний: 2
Скачать
- Предыдущая
Основы языка PL/SQL
Следующая -
Основные подходы в решении задач на распознавание
Похожие презентации
Использование параллелограмма в жизни
Финно-угоры, ты и я
Руководство и лидерство
Презентация на тему Алгебраические дроби сложение и вычитание
Команда “Формула лидерства”
Ильяс Салаев. Тренинги на передачу чувственно-смыслового содержания текста
Презентация на тему Биосфера как единая экосистема Земли
Системы замкнутого водоснабжения
представляют
Элементы фирменного стиля предприятия
Домашний торт Красный бархат
Единый социальный налог
Комиссионный осмотр обустройств станции
Мониторы: классификация, основные параметры и принцип работы
Разработка мультимедийного обучающего комплекса по оборудованию для добычи и обогащения полезных ископаемых
Использование дрожжей в пищевой промышленности
Самый совершенный «инструмент»
Урок 2.3.2. Рассмотрение уголовного дела (стадия рассмотрения дела в судебном заседании)
Коллаж. Практическая работа
Treści kształcenia — kryteria doboru treści
Бизнес-игра Завод
Проектная деятельность
Скульптуры из снега
Владимир Михайлович Ануфриев
Реформы Александра III
Порядок прохождения тестовых испытаний
Каникулы
Алгоритмы
(function(d,s){d.getElementById("licnt7D89").src=
"https://counter.yadro.ru/hit?t12.1;r"+escape(d.referrer)+
((typeof(s)=="undefined")?"":";s"+s.width+"*"+s.height+"*"+
(s.colorDepth?s.colorDepth:s.pixelDepth))+";u"+escape(d.URL)+
";h"+escape(d.title.substring(0,150))+";"+Math.random()})
(document,screen)
Обратная связь
Для правообладателей
Email:
Нажмите что бы посмотреть
window.__NUXT__=(function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U){return {data:{meta:{result:{meta:{h1:l,main_text:b,main_title:m,main_description:n,main_keywords:o,main_image:b},app:{logo_image:p,logo_image_width:i,logo_image_height:q,logo_text:r,image_width_full:s,image_width_min:t,recaptcha_key:u,yandex_search:v,ya_context:e,banner_1:b,banner_2:b,banner_3:b,banner_4:b,banner_5:b,banner_6:b,banner_7:b,banner_8:b,banner_9:b,banner_10:b,email:w,footer_before:x,footer:y,dark_theme:c,strategy:{image_alt_words:h,item_slide_header:z,item_images:A,item_images_tag:B,item_words_h3:c,item_words_tag:C,item_words_1:h,routing:D,item_slide_skipping:E,item_download_timeout:F,item_slider_width:a,item_show_pdf:c,item_show_contents:c,item_show_filename:e},colors:{header_text:j,header_bg:k,accent:G}},social:H}},item:{result:{id:368733,name:"Основы создания веб-страниц",category:I,count:64,jpg:"jpg\u002F368733",hits:436,download:J,h1:K,meta:{h1:K,title:"Основы создания веб-страниц презентация",description:"Основы создания веб-страниц презентация, доклад, проект, Разное ",keywords:"Основы создания веб-страниц, презентация, доклад, проект, скачать презентацию на тему, PowerPoint, скачати презентацію, фон, шаблон, урок, конспект, класс, школа, класс, Разное",download_link:b},text:"\u003Cp style=\"text-align: justify;\" \u002F\u003EПрезентация на тему Основы создания веб-страниц, из раздела: Разное.&nbsp; Презентацию в формате PowerPoint (pptx) можно скачать внизу страницы, поделившись ссылкой в социальных сетях! Презентации взяты из открытого доступа или загружены их авторами, администрация сайта не отвечает за достоверность информации в них. Все права принадлежат авторам материалов: \u003Ca href=\"politika-zashchity-avtorskih-prav\"\u003EПолитика защиты авторских прав\u003C\u002Fa\u003E",seo_text:"\u003Cp\u003EСодержание\u003Cbr\u003E\u003Cp\u003EОсновные термины\u003Cbr\u003EСпособы создания веб-страниц\u003Cbr\u003EОсновные понятия языка Основные понятия языка HTML\u003Cbr\u003EСтруктура веб-страницы\u003Cbr\u003EОсновные теги\u003Cbr\u003EВставка гиперссылки\u003Cbr\u003EСписки\u003Cbr\u003EДобавление графики\u003Cbr\u003EТаблицы\u003Cbr\u003EФреймы\u003Cbr\u003EИтоги\u003Cbr\u003E \u003Cp\u003EОсновные термины\u003Cbr\u003E\u003Cp\u003EВеб-страница, Веб-страница, HTML,WWW\u003Cbr\u003EСайт\u003Cbr\u003EСервер\u003Cbr\u003EБраузер\u003Cbr\u003EHTTP\u003Cbr\u003EГипертекст\u003Cbr\u003EГиперссылки\u003Cbr\u003E\u003Cbr\u003E\u003Cbr\u003E\u003Cp\u003E\u003Cbr\u003E",file:"Основы-создания-веб-страниц.pptx",texts:["Дамбиева Жаргалма Дамбиевна,\u003Cbr\u003E ст.преподаватель кафедры ВТИ\u003Cbr\u003E\u003Cp\u003EОсновы создания веб-страниц \u003Cbr\u003E","\u003Cp\u003EСодержание\u003Cbr\u003E\u003Cp\u003EОсновные термины\u003Cbr\u003EСпособы создания веб-страниц\u003Cbr\u003EОсновные понятия языка Основные понятия языка HTML\u003Cbr\u003EСтруктура веб-страницы\u003Cbr\u003EОсновные теги\u003Cbr\u003EВставка гиперссылки\u003Cbr\u003EСписки\u003Cbr\u003EДобавление графики\u003Cbr\u003EТаблицы\u003Cbr\u003EФреймы\u003Cbr\u003EИтоги\u003Cbr\u003E","\u003Cp\u003EОсновные термины\u003Cbr\u003E\u003Cp\u003EВеб-страница, Веб-страница, HTML,WWW\u003Cbr\u003EСайт\u003Cbr\u003EСервер\u003Cbr\u003EБраузер\u003Cbr\u003EHTTP\u003Cbr\u003EГипертекст\u003Cbr\u003EГиперссылки\u003Cbr\u003E\u003Cbr\u003E","\u003Cp\u003E\r\nВеб-страница, HTML, WWW\r\n\r\n\u003Cbr\u003E\u003Cp\u003EWeb-страница (документ HTML) представляет собой текстовый файл на языке HTML формата *.htm или *.html, размещенный в World Wide Web (WWW). Web-страница может содержать текст, гиперссылки, вставки в виде графики, анимации, видеоклипов и музыки. \u003Cbr\u003EWWW - Всемирная Паутина, распределенная система доступа к гипертекстовым документам, существующая в Интернете. \u003Cbr\u003EДля подготовки Web-страниц к публикации в Интернете применяется специальный язык разметки гипертекста - HTML (Hyper Text Markup Language), дословно с английского \"язык маркировки гипертекста\". Первую версию HTML разработал сотрудник Европейской лаборатории физики элементарных частиц Тим Бернерс-Ли.\u003Cbr\u003E","\u003Cp\u003EСайт\u003Cbr\u003E\u003Cp\u003EСайт- совокупность WEB-страниц, объединенных тематически.\u003Cbr\u003EСайт должен находиться на веб-сервере (т.е. компьютере, к которому будут обращаться клиенты).\u003Cbr\u003EВеб-мастер – лицо, ответственное за поддержание и обновление веб-документов на веб-серверах.\u003Cbr\u003E","\u003Cp\u003EСервер\u003Cbr\u003E\u003Cp\u003EИнформация хранится на веб-серверах - компьютерах со специальным программным обеспечением, объединенных в сеть Интернет.\u003Cbr\u003EОсновная функция сервера - найти веб-документ по запросу клиента (браузера). \u003Cbr\u003EСерверы имеют большой объем дискового пространства и оперативной памяти, а также высокое быстродействие. Они работают 24 часа в сутки 7 дней в неделю. \u003Cbr\u003E","\u003Cp\u003EБраузер\u003Cbr\u003E\u003Cp\u003EДля просмотра веб-документов используются специальные программы - так называемые браузеры, программы интерпретаторы с языка HTML. Наиболее распространены Internet Explorer, Opera, Mozill, Firefox, Netscape Navigator. \u003Cbr\u003EБраузер посылает по сети запрос серверу, хранящему файл с необходимым документом. В ответ на запрос сервер высылает браузеру требуемый файл или сообщение об отказе, если файл по некоторым причинам недоступен. \u003Cbr\u003E","\u003Cp\u003EHTTP\u003Cbr\u003E\u003Cp\u003EЛюбой протокол - это набор правил, которые используются компьютерами для обмена информацией. \u003Cbr\u003EСреди протоколов Интернета самый распространенный - HTTP (Hyper Text Transfer Protoсol -протокол передачи гипертекста). \u003Cbr\u003E","\u003Cp\u003EГипертекст\u003Cbr\u003E\u003Cp\u003EТермин «гипертекст» был впервые введен около двух десятилетий назад Томом Нильсоном, и он означал нелинейно организованный текст.\u003Cbr\u003EГипертекстом называется совокупность связанных гиперссылками текстов. \u003Cbr\u003E","\u003Cp\u003EГиперссылки\u003Cbr\u003E\u003Cp\u003EГиперссылка - фрагмент текста или графики, который является указателем на другой файл или объект. \u003Cbr\u003EГиперссылки позволяют переходить к другой части документа или от одного документа к другому документу или файлу Сети. \u003Cbr\u003EОни подсвечены или выделены другим цветом, подчеркнуты.\u003Cbr\u003E","\u003Cp\u003EПервый способ: воспользоваться специальными программами для написания web-страниц.\u003Cbr\u003EДля этой цели существуют специальные программы: MS FrontPage или Macromedia DreamWeaver, Allaire HomeSite или 1st Page 2000 \u003Cbr\u003EСамый простой способ: Microsoft Word. \u003Cbr\u003EВы просто пишете в Word свою страницу, связываете гиперссылками, а потом сохраняете в виде HTML. Этот способ не очень хорош даже для создания простеньких страничек, т.к. занимает много места. \u003Cbr\u003E\u003Cp\u003EСпособы создания веб-страницы\u003Cbr\u003E","\u003Cp\u003EWeb-страницу можно написать в простом текстовом редакторе типа блокнот. Для того, чтобы файл воспринимался как web-страница, надо сохранить с расширением .htm или .html, и тогда он будет открываться интернет-браузером. \u003Cbr\u003EДля редактирования Web-страницы в Блокноте во время ее просмотра в браузере, используется пункт меню Вид-В виде HTML. \u003Cbr\u003EПосле редактирования в Блокноте для просмотра отредактированной страницы надо нажать клавишу F5 или кнопку \"Обновить\" на панели инструментов.\r\n\u003Cbr\u003E\u003Cp\u003E\r\nЕсли у вас нет никаких специальных программ для создания web-страниц, то:\r\n\u003Cbr\u003E","\u003Cp\u003EЭтапы создания веб-страницы в блокноте:\u003Cbr\u003E\u003Cp\u003EВ своей папке создать отдельную папку для файлов. \u003Cbr\u003EОткрыть программу БЛОКНОТ.\u003Cbr\u003EНаписать в нем текст WEB-страницы.\u003Cbr\u003EСохранить этот текст в папке под любым именем с расширением .html.\u003Cbr\u003EЗатем перейти в папку. \u003Cbr\u003E Документ должен иметь значок или \u003Cbr\u003EОткрыть этот документ. (Откроется программа-браузер).\u003Cbr\u003EЕсли нужно внести изменения в документ, то выполнить команду ВИД⇨Просмотр HTML-кода (Исходный текст). Текст WEB-страницы откроется в блокноте.\u003Cbr\u003EВнести в текст изменения. Сохранить его, перейти в программу-браузер и нажать кнопку ОБНОВИТЬ\u003Cbr\u003E","\u003Cp\u003EТЕГ\u003Cbr\u003E\u003Cp\u003EТег – код языка HTML, с помощью которого выполняется разметка исходного текста.\u003Cbr\u003EТеги записываются в угловых скобках, например: \u003Chtml\u003E \u003Cbr\u003EЗакрывающий тег всегда снабжается косой чертой: \u003C\u002Fhtml\u003E\u003Cbr\u003EТеги бывают парные (открывающий \u003Chtml\u003E и закрывающий \u003C\u002Fhtml \u003E) и непарные (одиночные, только открывающие). \u003Cbr\u003E","\u003Cp\u003EКонтейнер\u003Cbr\u003E\u003Cp\u003EКонтейнером называется парный тег, внутри которого могут располагаться другие теги или текст, графика и т.д. \u003Cbr\u003EКонтейнер требует закрывающего тега.\u003Cbr\u003EТаким образом, контейнер состоит из открывающего и закрывающего тега.\u003Cbr\u003EНапример,\u003Cbr\u003E \u003Chtml\u003E … \u003Ctitle\u003E … \u003C\u002Ftitle\u003E … \u003C\u002Fhtml\u003E \u003Cbr\u003EЗдесь два контейнера – html и title. \u003Cbr\u003EКонтейнеры должны быть вложенными.\u003Cbr\u003E\u003Cbr\u003E","\u003Cp\u003EАтрибуты\u003Cbr\u003E\u003Cp\u003EТеги могут иметь атрибуты со значениями. С их помощью можно указать цвет текста, его размер, расположение по отношению к рисунку и т. д. Атрибуты отделяются от тега пробелами.\u003Cbr\u003EАтрибуты имеются только у открывающих тегов. \u003Cbr\u003EУ закрывающих тегов атрибутов нет.\u003Cbr\u003EНапример,\u003Cbr\u003E\u003Cp\u003E - тег начала абзаца, \u003Cbr\u003E\u003Cp align=“center”\u003E - тег начала абзаца, выровненного по центру окна. Здесь атрибут- align, а значение- center.\u003Cbr\u003E\u003Cp\u003E\u003Cfont color=green size=5\u003E\u003Cbr\u003E\u003C\u002Ffont\u003E\u003Cbr\u003E","\u003Cp\u003EСтруктура HTML-документа\u003Cbr\u003E\u003Cp\u003EСтруктура html- это базисные тэги (все документы на HTML должны содержать эти тэги):\u003Cbr\u003E\u003Chtml\u003E - документ написан на языке HTML\u003Cbr\u003E\u003Chead\u003E - открыть строку заголовка \u003Cbr\u003E\u003Ctitle\u003E - название документа\u003Cbr\u003E\u003C\u002Ftitle\u003E \u003Cbr\u003E\u003C\u002Fhead\u003E - закрыть строку заголовка \u003Cbr\u003E\u003Cbody\u003E- открыть тело документа (содержимое документа)\u003Cbr\u003E\u003C\u002Fbody\u003E - закрыть тело документа \u003Cbr\u003E\u003C\u002Fhtml\u003E -закрыть html-документ\u003Cbr\u003E","\u003Cp\u003E\u003Chtml\u003E\u003Cbr\u003E\u003Chead\u003E\u003Cbr\u003E\u003Ctitle\u003E Мой первый шаг \u003C\u002Ftitle\u003E\u003Cbr\u003E\u003C\u002Fhead\u003E\u003Cbr\u003E\u003Cbody\u003E\u003Cbr\u003EЗдравствуйте, это моя первая страница.\u003Cbr\u003EДобро пожаловать! \u003Cbr\u003E\u003C\u002Fbody\u003E\u003Cbr\u003E\u003C\u002Fhtml\u003E\u003Cbr\u003E\u003Cp\u003EСтруктура HTML-документа\u003Cbr\u003E","\u003Cp\u003EТеги форматирования абзацев \u003Cbr\u003E\u003Cp\u003EТег \u003Cp\u003E указывает на начало нового абзаца и вставляет пустую строку перед абзацем. \u003Cbr\u003E Атрибут align, значения left, right, center, justify.\u003Cbr\u003EТег \u003Cbr\u003E - разрыв строки. Используется для записи текстов стихов и песен.\u003Cbr\u003EТег \u003Cpre\u003E… \u003C\u002Fpre\u003E выделяет часть исходного текста, который должен отображаться «как есть» - с теми же отступами и разбиением на строки. Используется для записи текстов программ. Внутри этого тега могут располагаться гиперссылки, картинки и пр.\u003Cbr\u003EТег \u003Ccenter\u003E… \u003C\u002Fcenter\u003E - содержимое выравнивается по центру – текст, рисунки, таблицы. Аналог атрибута align=center\u003Cbr\u003E\u003Cbr\u003E\u003Cp\u003E\u003Cp align=left\u003E-выравнивание по левому краю\u003Cbr\u003E\u003Cp align=right\u003E -по правому краю\u003Cbr\u003E\u003Cp align=justify\u003E-по ширине\u003Cbr\u003E\u003Cp align=center\u003E-по центру\u003Cbr\u003EВ лесу родилась ёлочка\u003Cbr\u003EВ лесу она росла\u003Cbr\u003E","\u003Cp\u003EЗаголовки\u003Cbr\u003E\u003Cp\u003EСуществует 6 уровней заголовков:\u003Cbr\u003E\u003Ch1\u003E . . . \u003C\u002Fh1\u003E, …,\u003Cbr\u003E\u003Ch6\u003E . . . \u003C\u002Fh6\u003E\u003Cbr\u003Eh1-самый крупный заголовок, \u003Cbr\u003Eh6- самый мелкий.\u003Cbr\u003EАтрибут данного тега: align – выравнивание\u003Cbr\u003EЗначения: left right center \u003Cbr\u003E\u003Cp\u003E\u003Cbody bgcolor =“purple\" text=“gray\"\u003E\u003Cbr\u003E\u003Ch1 align = “center”\u003E Title 1 \u003C\u002FH1\u003E\u003Cbr\u003E\u003Ch2 align = “right”\u003E Title 2 \u003C\u002FH2\u003E\u003Cbr\u003E\u003Ch3 align = “left”\u003E Title 3 \u003C\u002FH3\u003E\u003Cbr\u003E\u003Ch4\u003E Title 4 \u003C\u002FH4\u003E\u003Cbr\u003E\u003Ch5\u003E Title 5 \u003C\u002FH5\u003E\u003Cbr\u003E\u003Ch6\u003E Title 6 \u003C\u002FH6\u003E\u003Cbr\u003E\u003C\u002Fbody\u003E\u003Cbr\u003E","\u003Cp\u003EТеги форматирования шрифта – размер, цвет и тип шрифта\u003Cbr\u003E\u003Cp\u003EТег \u003Cfont\u003E … \u003C\u002Ffont\u003E- изменяет размер, цвет и тип шрифта.\u003Cbr\u003EАтрибуты:\u003Cbr\u003E size - задает размер фрагмента текста от 1 до 7.\u003Cbr\u003E \u003Cfont size =1..7\u003E... \u003C\u002Ffont\u003E\u003Cbr\u003E color - задает цвет фрагмента текста. Цвет задается \t \t словом или кодом RGB\u003Cbr\u003E \u003Cfont color =red\u003E... \u003C\u002Ffont\u003E\u003Cbr\u003E \u003Cfont color = “#FF0000”\u003E... \u003C\u002Ffont\u003E\u003Cbr\u003E face - задает тип шрифта.\u003Cbr\u003E \u003Cfont face =arial\u003E...\u003C\u002Ffont\u003E\u003Cbr\u003EЕсли надо задать сразу размер,цвет текста и тип шрифта, то эти атрибуты пишутся сразу за тегом FONT:\u003Cbr\u003E\u003Cfont size=3 color=red face=arial \u003E...\u003C\u002Ffont\u003E\u003Cbr\u003E\u003Cp\u003EРазмер увеличивается от 1 до 7. По-умолчанию size=3\u003Cbr\u003EРазмер изменяется на 20%: 4 размер больше 3 на 20%, 5 размер больше 4 на 20%\u003Cbr\u003Esize=4 – абсолютный размер, \u003Cbr\u003Esize= +1 – относительный (на 1 больше, чем базовый размер шрифта)\u003Cbr\u003E","\u003Cp\u003EТеги форматирования символов текста \u003Cbr\u003E\u003Cp\u003E\u003Cb\u003E - полужирного шрифта;\u003Cbr\u003E\u003Ci\u003E - курсива;\u003Cbr\u003E\u003Cstrong\u003E - идентификатор выделенного шрифта;\u003Cbr\u003E\u003Cu\u003E - подчеркивания;\u003Cbr\u003E\u003Cs\u003E - перечеркивания;\u003Cbr\u003E\u003Ctt\u003E - равноширинного шрифта (телетайпного или курьера);\u003Cbr\u003E\u003Cbig\u003E - задает увеличенный размер шрифта;\u003Cbr\u003E\u003Csmall\u003E - задает уменьшенный размер шрифта;\u003Cbr\u003E\u003Csub\u003E - задает нижний индекс;\u003Cbr\u003E\u003Csup\u003E - задает верхний индекс;\u003Cbr\u003E\u003Cblink\u003E- мерцающий текст.\u003Cbr\u003E Можно комбинировать теги стилей:\u003Cbr\u003E \u003Cb\u003E\u003Ci\u003EПолужирный курсив\u003C\u002Fi\u003E\u003C\u002Fb\u003E\u003Cbr\u003E","\u003Cp\u003EАтрибуты тега BODY\u003Cbr\u003E\u003Cp\u003EЦветовая схема всего HTML-документа определяется при помощи специальных атрибутов тега \u003CBODY\u003E:\u003Cbr\u003EBgcolor – изменяет цвет фона. \u003Cbr\u003E\t\t\u003Cbody bgcolor = red\u003E\u003Cbr\u003EText – задает цвет текста.\u003Cbr\u003E\t\t\u003Cbody bgcolor = “red” text=blue\u003E\u003Cbr\u003EBackground – помещает в качестве фона \u003Cbr\u003E\t\t\t\t изображение из файла.\t \u003Cbr\u003E \u003Cbody background = «Зима.jpg»\u003E \u003Cbr\u003E фоновое изображение из файла «Зима.jpg».\u003Cbr\u003ELink – задает цвет гиперссылок, по которым пользователь еще «не ходил».\u003Cbr\u003EVlink – задает цвет посещенных гиперссылок.\u003Cbr\u003EAlink – цвет активной гиперссылки\u003Cbr\u003E","\u003Cp\u003EСоздание бегущей текстовой строки \u003Cbr\u003E\u003Cp\u003E\u003Cmarquee\u003E Добро пожаловать! \u003C\u002Fmarquee\u003E \u003Cbr\u003E-текстовая строка должна бежать влево \u003Cbr\u003EАтрибуты тега: behavior \u003Cbr\u003E\t\t\tscrollamount (скорость) \u003Cbr\u003E\u003Cmarquee behavior=«alternate» scrollamount=15\u003E Как прекрасно жить на свете!\u003C\u002Fmarquee\u003E \u003Cbr\u003E-текстовая строка должна бежать то влево, то вправо со скоростью =15.\u003Cbr\u003E","\u003Cp\u003EГипертекстовая ссылка \u003Cbr\u003E\u003Cp\u003EГиперссылка привязывается к какому-либо элементу страницы, по щелчку на который происходит перемещение в указанное место.\u003Cbr\u003EГиперссылка задаётся тегом \u003Ca\u003E с параметром href и выглядит так:\u003Cbr\u003E\u003Ca href=\"место назначения\"\u003Eтекст или объект ссылки\u003C\u002Fa\u003E \u003Cbr\u003EМестом назначения может быть файл. Надо указать путь к файлу и его название с расширением. Файл может быть любым -текстовый, другая страница, картинка, презентация, аудиофайл, файл .exe и т.д. \u003Cbr\u003EНапример,\u003Cbr\u003E\u003Ca href=«friends.html\"\u003Eмои друзья\u003C\u002Fa\u003E\u003Cbr\u003E - гиперссылка, переход к файлу “friends.html”- веб-странице о друзьях.\u003Cbr\u003E\u003Ca href=«otchot.doc»\u003Eотчёт\u003C\u002Fa\u003E\u003Cbr\u003E-ссылка на текстовый файл “otchot.doc\"\u003Cbr\u003E\u003Ca href=«семья.ppt»\u003Eпрезентация\u003C\u002Fa\u003E\u003Cbr\u003E -ссылка на презентацию «семья.ppt»\u003Cbr\u003E","\u003Cp\u003E \u003Cbr\u003E\u003Cp\u003EМестом назначения может быть адрес сайта:\u003Cbr\u003E\u003Ca href=\"http:\u002F\u002Fwww.bsu.ru\"\u003EБГУ\u003C\u002Fa\u003E \u003Cbr\u003E\t- ссылка, переход к сайту БГУ.\u003Cbr\u003E\u003Ca href=\"mailto: [e-mail]\"\u003Eмоя почта\u003C\u002Fa\u003E\u003Cbr\u003E- ссылка на адрес электронной почты [e-mail]\u003Cbr\u003E\u003Ca href=“2.html“\u003E\u003Cimg src=“foto.jpeg“ \u003E\u003C\u002Fa\u003E\u003Cbr\u003E \t- ссылка на рисунок\u003Cbr\u003E\u003Ca href=“#chapter1”\u003EПерейти к разделу 1 \u003C\u002Fa\u003E\u003Cbr\u003EСсылка на определенное место в текущем документе.\u003Cbr\u003E\u003Cp\u003EГипертекстовая ссылка\u003Cbr\u003E","\u003Cp\u003EТеги списков \u003Cbr\u003E\u003Cp\u003E\u003Col\u003E\u003Cli\u003E...\u003Cli\u003E...\u003C\u002Fol\u003E - нумерованный список\u003Cbr\u003E\u003Cul\u003E\u003Cli\u003E...\u003Cli\u003E...\u003C\u002Ful\u003E - маркированный список \u003Cbr\u003E\u003Col\u003E \t\t\t \u003Cul\u003E\u003Cbr\u003E\u003Cli\u003Eручка\t\t\t \u003Cli\u003Eручка \t\t\t\u003Cbr\u003E\u003Cli\u003Eтетрадь\t\t\t \u003Cli\u003Eтетрадь \t\u003Cbr\u003E\u003Cli\u003Eлинейка\t\t\t \u003Cli\u003Eлинейка\u003Cbr\u003E\u003C\u002Fol\u003E\t\t\t\t \u003C\u002Ful\u003E\u003Cbr\u003Eручка\t\t\t ● ручка \t\t\t\u003Cbr\u003Eтетрадь\t\t\t ● тетрадь\u003Cbr\u003Eлинейка\t\t\t ● линейка \t\u003Cbr\u003E\u003Cp\u003Eзаголовок списка\u003Cbr\u003E\u003Cp\u003Eэлемент списка\u003Cbr\u003E","\u003Cp\u003E\r\nАтрибуты нумерованного списка\r\n\u003Cbr\u003E\u003Cp\u003Estart=“число“ устанавливает номер списка, с которого начинается нумерация\u003Cbr\u003EType=”тип” устанавливает тип номеров в списке\u003Cbr\u003E\u003Cp\u003EВ тэг \u003Cli\u003E можно вставлять атрибуты \u003Cbr\u003EType=”тип” и value=“число“ \u003Cbr\u003E","\u003Cp\u003EПример использования атрибутов нумерованного списка:\u003Cbr\u003E\u003Cp\u003E\u003Col start=\"5\"\u003EСписок предметов, начиная с 5\u003Cbr\u003E\t\u003Cli \u003EИстория\u003Cbr\u003E\t\u003Cli \u003EМатематика\u003Cbr\u003E\t\u003Cli \u003EФизика\u003Cbr\u003E\t\u003Cli\u003EИнформатика\u003Cbr\u003E \u003C\u002Fol\u003E\u003Cbr\u003E\u003Col type=\"A\"\u003EСписок с использованием букв\u003Cbr\u003E\t\u003Cli\u003EИстория\u003Cbr\u003E\t\u003Cli\u003EМатематика\u003Cbr\u003E\t\u003Cli\u003EФизика\u003Cbr\u003E\t\u003Cli type=\"1\"\u003EИнформатика\u003Cbr\u003E\u003C\u002Fol\u003E\u003Cbr\u003E\u003Col start=\"10\" type=\"I\" \u003EСписок с римскими цифрами\u003Cbr\u003E\t\u003Cli\u003EИстория\u003Cbr\u003E\t\u003Cli\u003EМатематика\u003Cbr\u003E\t\u003Cli\u003EФизика\u003Cbr\u003E\t\u003Cli\u003EХимия\u003Cbr\u003E\u003C\u002Fol\u003E\u003Cbr\u003E","\u003Cp\u003E\r\nАтрибуты маркированного списка:\r\n\u003Cbr\u003E\u003Cp\u003E\u003Cul \u003EСписок предметов\u003Cbr\u003E\t\u003Cli \u003EИстория\u003Cbr\u003E\t\u003Cli type=\"circle\"\u003EМатематика\u003Cbr\u003E\t\u003Cli type=\"square\"\u003EФизика\u003Cbr\u003E\t\u003Cli\u003EИнформатика \u003Cbr\u003E\u003C\u002Ful\u003E\u003Cbr\u003E\u003Cul type=\"1\"\u003EСмешанный список\u003Cbr\u003E\t\u003Cli\u003EИстория\u003Cbr\u003E\t\u003Cli\u003EМатематика\u003Cbr\u003E\t\u003Cli\u003EФизика\u003Cbr\u003E\t\u003Cli type=\"1\"\u003EИнформатика\u003Cbr\u003E\u003C\u002Ful\u003E\u003Cbr\u003E\u003Col type=\"circle\"\u003EПеределанный список из ol в ul\u003Cbr\u003E\t\u003Cli\u003E10\u003Cbr\u003E\t\u003Cli\u003E11\u003Cbr\u003E\t\u003Cli\u003E12\u003Cbr\u003E\t\u003Cli\u003E13 \u003Cbr\u003E\u003C\u002Fol\u003E\u003Cbr\u003E\u003Cp\u003EDisc • (по умолчанию), Circle ⚪, Square ◻\r\n\u003Cbr\u003E","\u003Cp\u003EИспользуются для: \u003Cbr\u003EСловарей;\u003Cbr\u003EСписка типа имя \u002F значение;\u003Cbr\u003EСоздания маркеров элементов списка.\u003Cbr\u003EСписки определений устроены как статьи в толковом словаре, которые могут быть заполнены текстом и картинками.\u003Cbr\u003EТэг \u003CDL\u003E…\u003C\u002FDL\u003E заголовок списка\u003Cbr\u003EКаждый элемент списка состоит из двух частей – термина и определения:\u003Cbr\u003E \u003Cdd\u003E - термин\u003Cbr\u003E \u003Cdt\u003E - определение или объяснение\u003Cbr\u003E\u003Cp\u003EСписки определений\u003Cbr\u003E","\u003Cp\u003E\u003Cdl\u003E\u003Cbr\u003E\u003Cdt\u003EФлегматик\u003Cbr\u003E\t\u003Cdd\u003EПассивный, очень трудоспособный... \u003Cbr\u003E\u003Cdt\u003EСангвиник\u003Cbr\u003E\t\u003Cdd\u003EАктивный, энергичный...\u003Cbr\u003E\u003Cdt\u003EХолерик\u003Cbr\u003E\t\u003Cdd\u003EПорывистость и сила эмоциональных реакций...\u003Cbr\u003E\u003Cdt\u003EМеланхолик\u003Cbr\u003E\t\u003Cdd\u003EПассивный, легко утомляющийся...\u003Cbr\u003E\u003C\u002Fdl\u003E\u003Cbr\u003E\u003Cp\u003EПример использования списков определений:\u003Cbr\u003E","\u003Cp\u003EДОБАВЛЕНИЕ ГРАФИКИ НА ВЕБ-СТРАНИЦУ \u003Cbr\u003E","\u003Cp\u003EВставка графического изображения \u003Cbr\u003E\u003Cp\u003E\u003CIMG SRC=“Цветы.gif”\u003E\u003Cbr\u003Eвставка картинки из файла «Цветы.gif». \u003Cbr\u003EОбычно файлы с картинками помещают в ту же папку, что и сама страница или в отдельную папку:\u003Cbr\u003E\u003Cimg src = “Фото\u002FЦветы.gif”\u003E\u003Cbr\u003E\u003CIMG SRC=“Цветы.gif” width= 403 height=263\u003E \u003Cbr\u003EАтрибут width задает ширину изображения в пикселах.\u003Cbr\u003EАтрибут height задает высоту изображения в пикселах.\u003Cbr\u003EЗначения можно указывать в % по отношению к окну.\u003Cbr\u003Ewidth = “100%” height= 20 – полоса на все окно шириной 20 пикселей. \u003Cbr\u003E\u003Cp\u003EОбратите внимание на формат изображения!\u003Cbr\u003E\u003Cp\u003EФайл “Цветы.gif” находится в папке “Фото” \u003Cbr\u003E","\u003Cp\u003EСовременные браузеры могут работать с различными форматами изображений, но наиболее предпочтительные –\u003Cbr\u003E\u003Cp\u003EДля фотографий лучше использовать формат JPEG,\u003Cbr\u003Eдля рисунков и пиктограмм - GIF\u003Cbr\u003E\u003Cp\u003E .GIF \u003Cbr\u003E\u003Cp\u003E.JPEG\u003Cbr\u003E","\u003Cp\u003EGIF – (Graphics Interchange Format) \u003Cbr\u003Eформат обмена графикой.\u003Cbr\u003EПреимущества:\u003Cbr\u003EКодировка платформенно-независима (Windows, Macintosh, Unics).\u003Cbr\u003EПри создании файла применяется особая технология сжатия, которая существенно сокращает его размер, что очень ускоряет передачу его по сети.\u003Cbr\u003EGIF-изображения легко анимировать, использовать прозрачность и всплывание.\u003Cbr\u003EНедостаток: ограниченный набор цветов.\u003Cbr\u003EИспользуется для пиктограмм и небольших картинок.\u003Cbr\u003E\u003Cp\u003E7 Кб\u003Cbr\u003E\u003Cp\u003E159 Кб\u003Cbr\u003E\u003Cp\u003E113 Кб\u003Cbr\u003E","\u003Cp\u003EJPEG - (Joint Photographic Expert Group) – организация по стандартизации\u003Cbr\u003EПреимущества:\u003Cbr\u003E Кодировка платформенно-независима (Windows, Macintosh, Unics).\u003Cbr\u003E При создании файла применяется особая технология сжатия, которая существенно сокращает его размер, что очень ускоряет передачу его по сети.\u003Cbr\u003EПоддерживает десятки тысяч цветов\u003Cbr\u003E\u003Cp\u003E37 Кб\u003Cbr\u003E\u003Cp\u003E20 Кб\u003Cbr\u003E","\u003Cp\u003Ealign – выравнивание. Положение изображения лучше всегда указывать явно.\u003Cbr\u003EЗначения:\u003Cbr\u003Eleft, right – по левому или по правому краю.\u003Cbr\u003Etop – верхняя граница изображения устанавливается на уровне верхнего края самого высокого элемента в строке.\u003Cbr\u003Emiddle – середина изображения выравнивается с серединой строки.\u003Cbr\u003Ebottom – (по умолчанию) нижний край изображения выравнивается с базовой линией текста.\u003Cbr\u003Ehspace, vspace – задают расстояние в пикселях между картинкой и текстом по вертикали и горизонтали.\u003Cbr\u003E\u003Cp\u003EАтрибуты тега IMG:\u003Cbr\u003E","\u003Cp\u003EОбтекание изображения текстом\u003Cbr\u003E\u003Cp\u003E\u003CIMG SRC=\"море.jpg\" \u003Cbr\u003Ewidth=50% vspace=10 hspace=10\u003E\u003Cbr\u003EДушный зной над океаном, \u003CBR\u003E \u003Cbr\u003EНебеса без облаков; \u003CBR\u003E \u003Cbr\u003E\u003Cp\u003E\u003CIMG SRC=\"море.jpg\" width=50% vspace=10 hspace=10\u003E\u003Cbr\u003EДушный зной над океаном, \u003CBR\u003E \u003Cbr\u003EНебеса без облаков; \u003CBR\u003E \u003Cbr\u003E\u003Cp\u003EALIGN=LEFT\u003Cbr\u003E\u003Cp\u003EЕсли в тэге \u003Cimg src\u003E не указывать атрибут align=left или right, то текст на сайте располагается следующим образом:\u003Cbr\u003E","\u003Cp\u003EЦентрирование изображения\u003Cbr\u003E\u003Cp\u003EВыровнять изображение по центру можно тэгами абзацев:\u003Cbr\u003E\u003Cp\u003E1 способ:\u003Cbr\u003EТекст\u003Cbr\u003E\u003Cbr\u003E\u003Ccenter\u003E\u003Cbr\u003E\u003Cimg src = “dog.gif”\u003E\u003Cbr\u003E\u003C\u002Fcenter\u003E\u003Cbr\u003EТекст\u003Cbr\u003E\u003Cp\u003E2 способ:\u003Cbr\u003EТекст\u003Cbr\u003E\u003Cp align = center\u003E\u003Cbr\u003E\u003Cimg src = “dog.gif”\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cbr\u003EТекст\u003Cbr\u003E","\u003Cp\u003EМожно поместить картинки одновременно по обеим сторонам документа. В этом случае картинки задаются перед текстом. \u003Cbr\u003E\u003Cp\u003E\u003Cimg src=\"1.jpg\" width=\"25%\" hspace=\"10\" vspace=\"10\" align=\"left\"\u003E\u003Cbr\u003E\u003Cimg src=\"3.jpg\" width=\"25%\" hspace=\"10\" vspace=\"10\" align=\"right\"\u003E\u003Cbr\u003E\u003Cp align=\"center\"\u003EВ зоопарке было множество диких зверей… \u003Cbr\u003E","\u003Cp\u003EЕсли выводятся несколько картинок с одинаковым выравниванием (left или right), то следующее изображение позиционируется относительно предыдущего.\u003Cbr\u003E\u003Cp\u003E\u003Cimg src=\"1.BMP\" align=left width=200 height=200 hspace=20 vspace=20\u003E\u003Cbr\u003EБайкал\u003Cbr\u003E\u003Cimg src=“2.BMP\" align=left width=200 height=200 hspace=20 space=20\u003E Небоскрёбы\u003Cbr\u003E\u003Cimg src=“3.BMP\" align=left width=200 height=200 hspace=20 vspace=20\u003E Пингвин\u003Cbr\u003E","\u003Cp\u003EИспользование видео\u003Cbr\u003E\u003Cp\u003EКорректно работает только в Internet Explorer\u003Cbr\u003EАтрибут dynsrc тэга \u003Cimg\u003E позволяет вставлять видео .avi в документ. \u003Cbr\u003E\u003Cimg dynsrc=“kino.avi”\u003E\u003Cbr\u003EБраузер выделяет прямоугольную область в окне документа и проигрывает в ней видео. Некоторые браузеры могут неправильно среагировать на dynsrc. Поэтому рекомендуется в тэг \u003Cimg\u003E дополнительно включать атрибут со ссылкой на картинку.\u003Cbr\u003E\u003Cp\u003E\u003CIMG dynSRC=\"kino.avi\"src=\"pict.jpg\" \u003E\u003Cbr\u003E","\u003Cp\u003EУправление проигрыванием\u003Cbr\u003E\u003Cp\u003EКлип начинает проигрываться 1 раз сразу после загрузки документа. Для изменения параметров проигрывания видео используются следующие атрибуты:\u003Cbr\u003EControls (без значения) – добавляет элементы управления.\u003Cbr\u003ELoop= число повторений\u003Cbr\u003E =Infinite – бесконечно.\u003Cbr\u003EStart=mousover - проигрывание при наведении мышки на область видео.\u003Cbr\u003E =fileopen – при открытии документа\u003Cbr\u003EStart=“fileopen, mousover” – сразу при открытии, а затем при наведении мышки.\u003Cbr\u003EВсе остальные атрибуты тэга \u003Cimg\u003E можно применять также и к видео.\u003Cbr\u003E","\u003Cp\u003EЗвуковой фон\u003Cbr\u003E\u003Cp\u003EКорректно работает только в Internet Explorer.\u003Cbr\u003EТэг \u003Cbgsound\u003E - проигрывает аудиофайл при загрузке содержащего его документа. При обновлении документа проигрывание музыки возобновляется.\u003Cbr\u003EАтрибуты:\u003Cbr\u003Esrc=\"имя файла \" - файл с расширением .wav, \t\t\t\t.midi, .mp3\u003Cbr\u003ELoop=количество повторений\u003Cbr\u003E =infinite – безконечно.\u003Cbr\u003E \u003Cbgsound src=\"jingle.wav\" loop=3\u003E\u003Cbr\u003E","\u003Cp\u003EВставка объекта\u003Cbr\u003E\u003Cp\u003E\u003CEMBED SRC=“свадьба.avi\" width=280 height=140 autostart=true\u003E \u003Cbr\u003E- вставка объекта в документ HTML.\u003Cbr\u003EВ данном случае это мультимедийный файл “свадьба.avi”, причем при загрузке страницы происходит автозапуск этого файла, размеры которого на экране заданы атрибутами width и height.\u003Cbr\u003E","\u003Cp\u003EТаблицы\u003Cbr\u003E\u003Cp\u003EТаблица начинается тегом \u003Ctable\u003E.\u003Cbr\u003EТаблица состоит из строк, каждая из которых разбита на равное число столбцов. \u003Cbr\u003EСтроки открываются тегом \u003Ctr\u003E.\u003Cbr\u003EВ строках располагаются ячейки, открываемые тегом \u003Ctd\u003E.\u003Cbr\u003EПример простой таблицы:\u003Cbr\u003E\u003Ctable\u003E \u003Cbr\u003E\u003Ctr\u003E \u003Ctd\u003E Фамилия \u003C\u002Ftd\u003E \u003Ctd\u003E Иванов \u003C\u002Ftd\u003E \u003C\u002Ftr\u003E \u003Cbr\u003E\u003Ctr\u003E \u003Ctd\u003E Имя \u003C\u002Ftd\u003E \u003Ctd\u003E Пётр \u003C\u002Ftd\u003E \u003C\u002Ftr\u003E\u003Cbr\u003E \u003C\u002Ftable\u003E \u003Cbr\u003E\u003Cp\u003EТег \u003Cth\u003E \u003C\u002Fth\u003E описывает заголовки в первой строке таблицы.\u003Cbr\u003EТег \u003Ccaption\u003E \u003C\u002F caption \u003E - описывает заголовок таблицы.\u003Cbr\u003E","\u003Cp\u003EAlign- выравнивание таблицы относительно документа. Возможные значения: center, left, right \u003Cbr\u003EValign - выравнивает текст в таблице по вертикали. Значения: top, bottom, middle, baseline.\u003Cbr\u003Ebackground=“имя файла“ строка, определяющая рисунок для заднего фона таблицы\u003Cbr\u003Ebgcolor =цвет определяет задний фон таблицы \u003Cbr\u003Eborder толщина внешней рамки в пикселях. Если атрибут не указан, то таблица выводится без видимой рамки \u003Cbr\u003Ebordercolor =цвет цвет рамки \u003Cbr\u003E\u003Cp\u003E\r\nАтрибуты для тега \u003Ctable\u003E\r\n\u003Cbr\u003E","\u003Cp\u003Etitle =“Текст“ всплывающая подсказка \u003Cbr\u003Ewidth = число ширина таблицы в процентах или пикселях \u003Cbr\u003Eheight = число рекомендуемая \u003Cbr\u003Eвысота таблицы только в пикселях.\u003Cbr\u003Ecellspacing = число расстояние\u003Cbr\u003E между ячейками\u003Cbr\u003Ecellpadding = число расстояние \u003Cbr\u003Eмежду содержимым и рамкой\u003Cbr\u003Ecolls = число заранее сообщает\u003Cbr\u003E браузеру количество столбцов\u003Cbr\u003E в таблице.\u003Cbr\u003E\u003Cp\u003E\r\nАтрибуты для тега \u003Ctable\u003E\r\n\u003Cbr\u003E","\u003Cp\u003EПример\u003Cbr\u003E\u003Cp\u003E\u003Ctable border=\"3\" bordercolor=“magenta“ \u003Cbr\u003Ecellpadding=\"10\" cellspacing=\"10\"\u003E\u003Cbr\u003E\u003Ctr\u003E\u003Cbr\u003E\u003Ctd background=\"4.jpg\"\u003E A \u003C\u002Ftd\u003E\u003Cbr\u003E\u003Ctd bgcolor=\"gray \"\u003E \u003Cbr\u003E\u003Cimg src=\"6.jpg\" \u003E \u003C\u002Ftd\u003E\u003Cbr\u003E\u003C\u002Ftr\u003E\u003Cbr\u003E\u003C\u002Ftable\u003E\u003Cbr\u003E\u003C\u002Fbody\u003E\u003Cbr\u003E","\u003Cp\u003E\u003Ctr\u003E- строка таблицы\r\n\u003Cbr\u003E\u003Cp\u003EВ этом тэге можно использовать почти все атрибуты, \u003Cbr\u003Eчто и в тэге таблицы. Но действуют они только в этой строке.\u003Cbr\u003E\u003Cp\u003E\u003Cth\u003E - ячейки таблицы с заголовками столбцов \u003Cbr\u003E\u003Ctd\u003E- ячейки таблицы с данными \u003Cbr\u003E\u003Cp\u003EВ этих тэгах тоже можно применять почти все атрибуты таблицы.\u003Cbr\u003EДля оформления текста можно использовать все тэги форматирования. \u003Cbr\u003EТаблица строится по строкам. Сначала прописываются все ячейки в первой строке, затем – во второй, и т.д.\u003Cbr\u003E\u003Cp\u003EАтрибуты тегов \u003Ctr\u003E,\u003Cth\u003E и \u003Ctd\u003E\u003Cbr\u003E","\u003Cp\u003E\u003Ctable border=2 cols=2 bgcolor=yellow align=center\u003E \u003Cbr\u003E\u003CTR\u003E\u003Cbr\u003E \u003CTH\u003EЗаголовок столбца 1\u003C\u002FTH\u003E\u003Cbr\u003E\u003CTH\u003EЗаголовок столбца 2\u003C\u002FTH\u003E \u003Cbr\u003E\u003C\u002FTR\u003E \u003Cbr\u003E\u003CTR\u003E \u003Cbr\u003E\u003CTD\u003EЯчейка столбца 1, ряд 1\u003C\u002FTD\u003E\u003Cbr\u003E\u003CTD\u003EЯчейка столбца 2, ряд 1\u003C\u002FTD\u003E\u003Cbr\u003E \u003C\u002FTR\u003E \u003Cbr\u003E\u003CTR\u003E\u003Cbr\u003E \u003CTD\u003EЯчейка столбца 1, ряд 2\u003C\u002FTD\u003E\u003Cbr\u003E\u003CTD\u003EЯчейка столбца 2, ряд 2\u003C\u002FTD\u003E \u003Cbr\u003E\u003C\u002FTR\u003E \u003Cbr\u003E\u003C\u002Ftable\u003E\u003Cbr\u003E","\u003Cp\u003E\u003Ctable width=800 height=550 border=6 bgcolor=#990099 align=center\u003E\u003Cbr\u003E \u003Ctr\u003E\u003Cbr\u003E \u003Ctd width=200 height=150\u003E\u003Ccenter\u003E\u003Cbr\u003E\t\t \u003Cimg src=\"111.JPG\" width=150 height=120\u003E\u003C\u002Ftd\u003E\u003Cbr\u003E \u003Ctd width=600 \u003E\u003Cfont size=7 color=#CCCCCC\u003E\u003CB\u003E\u003CI\u003E\u003Ccenter\u003E Морской \tкотик \u003C\u002Ftd\u003E \u003C\u002Ftr\u003E\u003Cbr\u003E \u003Ctr\u003E\u003Cbr\u003E \u003Ctd width=200 height=150\u003E\u003Ccenter\u003E\u003Cbr\u003E\t\t \u003Cimg src=\"222.JPG\" width=150 height=120\u003E\u003C\u002Ftd\u003E\u003Cbr\u003E\t \u003Ctd width=600 \u003E\u003Cfont size=7 color=#CCFFFF\u003E\u003CB\u003E\u003CI\u003E \u003Ccenter\u003E Жирафы \t\t\t\u003C\u002Ftd\u003E \u003C\u002Ftr\u003E\u003Cbr\u003E \u003Ctr\u003E\u003Cbr\u003E \u003Ctd width=200 height=150\u003E\u003Ccenter\u003E\u003Cbr\u003E\t\t \u003Cimg src=\"333.JPG\" width=150 height=120\u003E\u003C\u002Ftd\u003E\u003Cbr\u003E\t \u003Ctd width=600 \u003E\u003Cfont size=7 color=#99CCFF\u003E\u003CB\u003E\u003CI\u003E \u003Ccenter\u003E \t\t\t\tЛеопард \u003C\u002Ftd\u003E \u003C\u002Ftr\u003E\u003Cbr\u003E \u003C\u002Ftable\u003E\u003Cbr\u003E","\u003Cp\u003E\r\nФреймы\r\n\u003Cbr\u003E\u003Cp\u003EФрейм - область гипертекстового документа со своими полосами прокрутки. Фреймы позволяют нам открыть в окне броузера не один, а сразу несколько документов.\u003Cbr\u003EНадо указать, сколько документов отобразить, сколько места будет занимать каждый, и каким образом они будут располагаться. Фрейм-документ не содержит тэга body. Вместо него используется тег \u003Cframeset\u003E.\u003Cbr\u003E \u003Cbr\u003E","\u003Cp\u003EПример\u003Cbr\u003E\u003Cframeset rows=\"100,*,150\"\u003E\r\n\u003Cframe src=«Главная.html\"\u003E\r\n\u003Cframe src=«Меню.html\"\u003E\r\n\u003Cframe src=«Адреса.html\"\u003E\r\n\u003C\u002Fframeset\u003E\r\n\u003Cbr\u003E\u003Cframeset cols=\"100,150,*\"\u003E\r\n\u003Cframe src=«Главная.html\"\u003E\r\n\u003Cframe src =«Меню.html\"\u003E \u003Cframe src =«Адреса.html\"\u003E \u003C\u002Fframeset\u003E\r\n\u003Cbr\u003E\u003Cp\u003EДокумент делится на 3 строки (rows) Высота первой строки - 100 пикселов, третьего - 150, а второй занимает все оставшееся пространство.\u003Cbr\u003E\u003Cp\u003EТэг frame сообщает какие документы будут в каждой строке: 1 строка – Главная.html, \u003Cbr\u003E2 строка-Меню, \u003Cbr\u003E3 строка-Адреса\u003Cbr\u003E\u003Cp\u003EДокумент делится на 3 столбца (cols) Ширина первого столбца - 100 пикселов, второго - 150, а третий занимает все оставшееся пространство.\u003Cbr\u003E","\u003Cp\u003E\r\nАтрибуты тега \u003C frameset \u003E:\r\n\u003Cbr\u003E\u003Cp\u003ERows – число и размер строк;\u003Cbr\u003ECols – число и размер столбцов;\u003Cbr\u003EЗначения – список величин, определяющий в пикселях или в % значения для строк и (или) колонок.\u003Cbr\u003EПри помощи rows разбиваем окно на строки и задаем какую высоту будет иметь каждая строка \u003Cbr\u003EПри помощи cols разбиваем окно на столбцы и задаем какую ширину будет иметь каждый столбец.\u003Cbr\u003EШирину и высоту можно задавать не только в пикселях, но и в процентах от общей ширины (высоты) окна: \t\u003Cframeset cols=\"10%,15%,75%\"\u003E \r\n\r\nПомните, что в сумме это все должно равняться 100%. \u003Cbr\u003E\t\u003Cframeset cols=\"10%,15%, *\u003E \r\n\u003Cbr\u003E * - обозначает оставшееся пространство\u003Cbr\u003EBorder – толщина рамки в пикселях;\u003Cbr\u003EBordercolor – цвет рамки.\u003Cbr\u003E\u003Cbr\u003E","\u003Cp\u003EТег \u003Cframe\u003E\u003Cbr\u003E\u003Cp\u003EМожет появляться только в теге \u003Cframeset\u003E и определяет содержимое одиночного фрейма.\u003Cbr\u003EАтрибуты:\u003Cbr\u003Esrc=“URL” - обязательный атрибут, указывает имя файла, который должен изображаться в нем. \u003Cbr\u003Ename=«метка» - связывает с фреймом метку, которая может использоваться для ссылок на фрейм в атрибуте target тега \u003Ca\u003E, таким образом можно изменить содержимое фрейма, используя гиперссылку в другом фрейме.\u003Cbr\u003Enoresize - запрещает изменение размеров фрейма.\u003Cbr\u003Escrolling = yes или no – разрешает или запрещает появление полос прокрутки.\u003Cbr\u003E","\u003Cp\u003EВложение тегов \u003Cframeset\u003E\u003Cbr\u003E\u003Cp\u003EВ тег \u003Cframeset\u003E … \u003C\u002Fframeset\u003E можно поместить еще один или несколько тегов \u003Cframeset\u003E.\u003Cbr\u003EЭто позволяет организовать области с разным количеством строк и столбцов.\u003Cbr\u003E\u003Cframeset rows=“30%,*”\u003E\u003Cbr\u003E \u003Cframe src=“1.html” name=“f1”\u003E\u003Cbr\u003E \u003Cframeset cols=“45%,*”\u003E\u003Cbr\u003E \u003Cframe src=“2.html” name=“f2”\u003E\u003Cbr\u003E \u003Cframe src=“3.html” name=“f3”\u003E\u003Cbr\u003E \u003C\u002Fframeset\u003E\u003Cbr\u003E\u003C\u002Fframeset\u003E\u003Cbr\u003E\u003Cp\u003E2.html\u003Cbr\u003E\u003Cp\u003E3.html\u003Cbr\u003E\u003Cp\u003E1.html\u003Cbr\u003E","\u003Cp\u003E\u003Cframeset cols=“2*,3*”\u003E\u003Cbr\u003E \u003Cframe src=“1.html” name=“f1”\u003E\u003Cbr\u003E \u003Cframeset rows=“30%,30%,40%”\u003E\u003Cbr\u003E \u003Cframe src=“2.html” name=“f2”\u003E\u003Cbr\u003E \u003Cframe src=“3.html” name=“f3”\u003E\u003Cbr\u003E \u003Cframe src=“4.html” name=“f4”\u003E\u003Cbr\u003E \u003C\u002Fframeset\u003E\u003Cbr\u003E\u003C\u002Fframeset\u003E\u003Cbr\u003E\u003Cp\u003E2.html\u003Cbr\u003E\u003Cp\u003E3.html\u003Cbr\u003E\u003Cp\u003E4.html\u003Cbr\u003E\u003Cp\u003E1.html\u003Cbr\u003E\u003Cp\u003EВложение тегов \u003Cframeset\u003E\u003Cbr\u003E","\u003Cp\u003EНавигация во фреймах\u003Cbr\u003E\u003Cp\u003EВ каждую область фрейма должен быть загружен HTML- документ.\u003Cbr\u003EЕсли в нем есть гиперссылки, то они открываются в этом же фрейме.\u003Cbr\u003EДля того, чтобы перенаправить вывод документа в другой фрейм, нужно использовать:\u003Cbr\u003EАтрибут name в целевом теге \u003Cframe\u003E\u003Cbr\u003EАтрибут target в теге \u003Ca\u003E\u003Cbr\u003E","\u003Cp\u003E\u003Cframeset cols=“25%,*”\u003E\u003Cbr\u003E \u003Cframe src=“menu.html” name=“menu”\u003E\u003Cbr\u003E \u003Cframe src=“1.html” name=“view-frame”\u003E\u003Cbr\u003E\u003C\u002Fframeset\u003E\u003Cbr\u003E\u003Cp\u003EМеню:\u003Cbr\u003EСсылка 1\u003Cbr\u003EСсылка 2\u003Cbr\u003EСсылка 3\u003Cbr\u003EСсылка 4\u003Cbr\u003E\u003Cp\u003EОкно просмотра\u003Cbr\u003E\u003Cp\u003EНавигация во фреймах\u003Cbr\u003E","\u003Cp\u003EМеню:\u003Cbr\u003EСсылка 1\u003Cbr\u003EСсылка 2\u003Cbr\u003EСсылка 3\u003Cbr\u003EСсылка 4\u003Cbr\u003E\u003Cp\u003EОкно просмотра\u003Cbr\u003E\u003Cp\u003EФайл menu.html:\u003Cbr\u003E\u003Chtml\u003E…\u003Cbr\u003E\u003Cbody\u003E…\u003Cbr\u003E\u003Ca href=“1.html” target=“view-frame”\u003EСсылка 1\u003C\u002Fa\u003E\u003Cbr\u003E\u003Ca href=“2.html” target=“view-frame”\u003EСсылка 2\u003C\u002Fa\u003E\u003Cbr\u003E\u003Ca href=“3.html” target=“view-frame”\u003EСсылка 3\u003C\u002Fa\u003E\u003Cbr\u003E\u003Ca href=“4.html” target=“view-frame”\u003EСсылка 4\u003C\u002Fa\u003E…\u003Cbr\u003E\u003C\u002Fbody\u003E\u003Cbr\u003E\u003C\u002Fhtml\u003E\u003Cbr\u003E\u003Cp\u003EЩелчок на соответствующей ссылке в левой части выведет документ в правый фрейм.\u003Cbr\u003E\u003Cp\u003EНавигация во фреймах\u003Cbr\u003E","\u003Cp\u003EСписок цветов:\r\n\u003Cbr\u003E\u003Cp\u003Eaqua - бирюзовый; black - черный; blue - синий;\u003Cbr\u003Egray - серый; green - зеленый; lime - ярко-зеленый;\u003Cbr\u003Emaroon - темно-красный; white - белый; navy - темно-синий;\u003Cbr\u003Eolive - оливковый; purple - фиолетовый; red - красный;\u003Cbr\u003Esilver - светло-серый; teal - ярко-голубой; yellow - желтый;\u003Cbr\u003Efuchsia - ярко-фиолетовый\u003Cbr\u003Ebrown - коричневый, orange - оранжевый, cyan - оттенок бирюзового,\u003Cbr\u003Epink - розовый \u003Cbr\u003E","\u003Cp\u003EИтоги: \u003Cbr\u003E\u003Cp\u003EПознакомились со структурой и основными командами форматирования WEB-документа.\u003Cbr\u003EУзнали, как создавать списки, таблицы, фреймы.\u003Cbr\u003EНаучились вставлять гиперссылки, графику, аудио и видеофайлы.\u003Cbr\u003E"],href:"\u002Fprezentacii-na-razlichnye-temy\u002Fosnovy-sozdaniya-vebstranic",href_category:"\u002Fprezentacii-na-razlichnye-temy",date:1612991735,related:[{id:343121,name:"Использование параллелограмма в жизни",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fispolzovanie-parallelogramma-v-zhizni",jpg:"jpg\u002F343121"},{id:964458,name:"Финно-угоры, ты и я",href:"\u002Fprezentacii-na-razlichnye-temy\u002Ffinno-ugory-ty-i-ya-1",jpg:"jpg\u002F964458"},{id:1164166,name:"Руководство и лидерство",href:"\u002Fprezentacii-na-razlichnye-temy\u002Frukovodstvo-i-liderstvo-8",jpg:"jpg\u002F1164166"},{id:278306,name:"Презентация на тему Алгебраические дроби сложение и вычитание ",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fprezentaciya-na-temu-algebraicheskie-drobi-slozhenie-i-vychitanie",jpg:"jpg\u002F278306"},{id:1152940,name:"Команда “Формула лидерства”",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fkomanda-formula-liderstva",jpg:"jpg\u002F1152940"},{id:1038656,name:"Ильяс Салаев. Тренинги на передачу чувственно-смыслового содержания текста",href:"\u002Fprezentacii-na-razlichnye-temy\u002Filyas-salaev-treningi-na-peredachu-chuvstvenno",jpg:"jpg\u002F1038656"},{id:267211,name:"Презентация на тему Биосфера как единая экосистема Земли",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fprezentaciya-na-temu-biosfera-kak-edinaya-ekosistema-zemli",jpg:"jpg\u002F267211"},{id:1097126,name:"Системы замкнутого водоснабжения",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fsistemy-zamknutogo-vodosnabzheniya",jpg:"jpg\u002F1097126"},{id:395598,name:"представляют",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fpredstavlyayut",jpg:"jpg\u002F395598"},{id:1130854,name:"Элементы фирменного стиля предприятия",href:"\u002Fprezentacii-na-razlichnye-temy\u002Felementy-firmennogo-stilya-predpriyatiya-2",jpg:"jpg\u002F1130854"},{id:888963,name:"Домашний торт Красный бархат",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fdomashniy-tort-krasnyy-barhat",jpg:"jpg\u002F888963"},{id:458117,name:"Единый социальный налог",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fedinyj-socialnyj-nalog",jpg:"jpg\u002F458117"},{id:1089633,name:"Комиссионный осмотр обустройств станции",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fkomissionnyy-osmotr-obustroystv-stantsii",jpg:"jpg\u002F1089633"},{id:1014786,name:"Мониторы: классификация, основные параметры и принцип работы",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fmonitory-klassifikatsiya-osnovnye-parametry-i-printsip",jpg:"jpg\u002F1014786"},{id:406056,name:"Разработка мультимедийного обучающего комплекса по оборудованию для добычи и обогащения полезных ископаемых",href:"\u002Fprezentacii-na-razlichnye-temy\u002Frazrabotka-mulytimediynogo-obuchayuschego-kompleksa-po-oborudovaniyu-dlya-dobychi-i-obogascheniya-poleznyh-iskopaemyh",jpg:"jpg\u002F406056"},{id:336421,name:"Использование дрожжей в пищевой промышленности",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fispolzovanie-drozhzhej-v-pishhevoj-promyshlennosti",jpg:"jpg\u002F336421"},{id:350400,name:"Самый совершенный «инструмент»",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fsamyj-sovershennyj-instrument",jpg:"jpg\u002F350400"},{id:441181,name:"Урок 2.3.2. Рассмотрение уголовного дела (стадия рассмотрения дела в судебном заседании)",href:"\u002Fprezentacii-na-razlichnye-temy\u002Furok-232-rassmotrenie-ugolovnogo-dela-stadiya-rassmotreniya-dela-v-sudebnom-zasedanii",jpg:"jpg\u002F441181"},{id:1088951,name:"Коллаж. Практическая работа",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fkollazh-prakticheskaya-rabota",jpg:"jpg\u002F1088951"},{id:883554,name:"Treści kształcenia — kryteria doboru treści",href:"\u002Fprezentacii-na-razlichnye-temy\u002Ftreci-ksztacenia-kryteria-doboru-treci",jpg:"jpg\u002F883554"},{id:1003367,name:"Бизнес-игра Завод",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fbiznes-igra-zavod",jpg:"jpg\u002F1003367"},{id:1013436,name:"Проектная деятельность",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fproektnaya-deyatelnost-2049",jpg:"jpg\u002F1013436"},{id:885681,name:"Скульптуры из снега",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fskulptury-iz-snega",jpg:"jpg\u002F885681"},{id:316713,name:"Владимир Михайлович Ануфриев",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fvladimir-mixajlovich-anufriev",jpg:"jpg\u002F316713"},{id:381573,name:"Реформы Александра III",href:"\u002Fprezentacii-na-razlichnye-temy\u002Freformy-aleksandra-iii",jpg:"jpg\u002F381573"},{id:1185434,name:"Порядок прохождения тестовых испытаний",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fporyadok-prohozhdeniya-testovyh-ispytaniy",jpg:"jpg\u002F1185434"},{id:881157,name:"Каникулы",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fkanikuly-2023",jpg:"jpg\u002F881157"},{id:344738,name:"Алгоритмы",href:"\u002Fprezentacii-na-razlichnye-temy\u002Falgoritmy-3",jpg:"jpg\u002F344738"}],navigation:{next:"\u002Fprezentacii-na-razlichnye-temy\u002Fosnovnye-podxody-v-reshenii-zadach-na-raspoznavanie",next_name:"Основные подходы в решении задач на распознавание",prev:"\u002Fprezentacii-na-razlichnye-temy\u002Fosnovy-yazyka-plsql",prev_name:"Основы языка PL\u002FSQL"}}},categories:{result:[{id:L,ordering:a,name:"Алгебра",pseudoname:"prezentacii-po-algebre"},{id:J,ordering:a,name:"Английский язык",pseudoname:"prezentacii-po-angliyskomu-yaziku"},{id:3,ordering:a,name:"Астрономия",pseudoname:"prezentacii-po-astronomii"},{id:4,ordering:a,name:"Биология",pseudoname:"prezentacii-po-biologii"},{id:5,ordering:a,name:"География",pseudoname:"prezentacii-po-geografii"},{id:6,ordering:a,name:"Геометрия",pseudoname:"prezentacii-po-geometrii"},{id:7,ordering:a,name:"Информатика",pseudoname:"prezentacii-po-informatike"},{id:8,ordering:a,name:"История",pseudoname:"prezentacii-po-istorii"},{id:9,ordering:a,name:"Литература",pseudoname:"prezentacii-po-literature"},{id:10,ordering:a,name:"Математика",pseudoname:"prezentacii-po-matematike"},{id:11,ordering:a,name:"Медицина",pseudoname:"prezentacii-po-medicine"},{id:h,ordering:a,name:"Музыка",pseudoname:"prezentacii-po-musice"},{id:13,ordering:a,name:"МХК",pseudoname:"prezentacii-po-mkhk"},{id:14,ordering:a,name:"ОБЖ",pseudoname:"prezentacii-po-obzh"},{id:15,ordering:a,name:"Обществознание",pseudoname:"prezentacii-po-obshhestvoznaniju"},{id:17,ordering:a,name:"Педагогика",pseudoname:"prezentacii-po-pedagogike"},{id:18,ordering:a,name:"Немецкий язык",pseudoname:"prezentacii-po-nemezkomy-yaziku"},{id:20,ordering:a,name:"Русский язык",pseudoname:"prezentacii-po-russkomu-yazyku"},{id:21,ordering:a,name:"Технология",pseudoname:"prezentacii-po-tehnologii"},{id:22,ordering:a,name:"Физика",pseudoname:"prezentacii-po-fizike"},{id:23,ordering:a,name:"Философия",pseudoname:"prezentacii-po-filosofii"},{id:24,ordering:a,name:"Химия",pseudoname:"prezentacii-po-himii"},{id:25,ordering:a,name:"Экология",pseudoname:"prezentacii-po-ehkologii"},{id:26,ordering:a,name:"Экономика",pseudoname:"prezentacii-po-ekonomike"},{id:27,ordering:a,name:"Детские презентации",pseudoname:"detskie-prezentacii"},{id:i,ordering:a,name:"Шаблоны презентаций",pseudoname:"shablony-dlya-prezentacii"},{id:29,ordering:a,name:I,pseudoname:"prezentacii-na-razlichnye-temy"},{id:48,ordering:a,name:"Культурология",pseudoname:"kulturologiya"},{id:16,ordering:L,name:"Окружающий мир",pseudoname:"prezentacii-po-okruzhayushhemu-miru"}]}},state:{},_errors:{},serverRendered:e,config:{public:{SITE_NAME:M,SITE_HOST:"slaidy.com",SITE_LANG:N,API_BASE_URL:"https:\u002F\u002Fslaidy.com\u002Fapi\u002F",pwaManifest:{name:M,short_name:b,description:b,lang:N,start_url:"\u002F?standalone=true",display:"standalone",background_color:k,theme_color:j,icons:[{src:"\u002F_nuxt\u002Ficons\u002F64x64.d7f48e96.png",type:d,sizes:O,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F64x64.maskable.d7f48e96.png",type:d,sizes:O,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F120x120.d7f48e96.png",type:d,sizes:P,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F120x120.maskable.d7f48e96.png",type:d,sizes:P,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F144x144.d7f48e96.png",type:d,sizes:Q,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F144x144.maskable.d7f48e96.png",type:d,sizes:Q,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F152x152.d7f48e96.png",type:d,sizes:R,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F152x152.maskable.d7f48e96.png",type:d,sizes:R,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F192x192.d7f48e96.png",type:d,sizes:S,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F192x192.maskable.d7f48e96.png",type:d,sizes:S,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F384x384.d7f48e96.png",type:d,sizes:T,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F384x384.maskable.d7f48e96.png",type:d,sizes:T,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F512x512.d7f48e96.png",type:d,sizes:U,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F512x512.maskable.d7f48e96.png",type:d,sizes:U,purpose:g}]},yandexMetrika:{id:"79446466",metrikaUrl:"https:\u002F\u002Fmc.yandex.ru\u002Fmetrika\u002Ftag.js",accurateTrackBounce:e,childIframe:c,clickmap:c,defer:c,useRuntimeConfig:e,trackHash:c,trackLinks:e,type:a,webvisor:c,triggerEvent:c,consoleLog:e,partytown:c,isDev:c}},app:{baseURL:"\u002F",buildAssetsDir:"\u002F_nuxt\u002F",cdnURL:b}},pinia:{app:{meta:{h1:l,main_text:b,main_title:m,main_description:n,main_keywords:o,main_image:b},app:{logo_image:p,logo_image_width:i,logo_image_height:q,logo_text:r,image_width_full:s,image_width_min:t,recaptcha_key:u,yandex_search:v,ya_context:e,banner_1:b,banner_2:b,banner_3:b,banner_4:b,banner_5:b,banner_6:b,banner_7:b,banner_8:b,banner_9:b,banner_10:b,email:w,footer_before:x,footer:y,dark_theme:c,strategy:{image_alt_words:h,item_slide_header:z,item_images:A,item_images_tag:B,item_words_h3:c,item_words_tag:C,item_words_1:h,routing:D,item_slide_skipping:E,item_download_timeout:F,item_slider_width:a,item_show_pdf:c,item_show_contents:c,item_show_filename:e},colors:{header_text:j,header_bg:k,accent:G}},social:H,token:b}}}}(0,"",false,"image\u002Fpng",true,"any","maskable",12,28,"#000000","#ffffff","Презентации, проекты, доклады в PowerPoint на любую тему","Презентации и проекты в PowerPoint","Презентации на различные темы для детей, школьников, родителей, студентов, учителей и преподавателей.","Презентация, презентация на тему, скачать презентацию, урок презентация, 1 2 3 4 5 6 7 8 9 10 11 класс","images\u002Fdata\u002Flogo.jpg",32,"Slaidy.com",720,480,"6LdhFOUnAAAAAIaOUjFtosEpzs6Ny643k1QKXXvv","3190226","[e-mail]","\u003C!--LiveInternet counter--\u003E\u003Ca href=\"https:\u002F\u002Fwww.liveinternet.ru\u002Fclick\"\r\ntarget=\"_blank\"\u003E\u003Cimg id=\"licnt7D89\" width=\"88\" height=\"31\" style=\"border:0\" \r\ntitle=\"LiveInternet: показано число просмотров за 24 часа, посетителей за 24 часа и за сегодня\"\r\nsrc=\"data:image\u002Fgif;base64,R0lGODlhAQABAIAAAAAAAP\u002F\u002F\u002FyH5BAEAAAEALAAAAAABAAEAAAIBTAA7\"\r\nalt=\"LiveInternet\"\u002F\u003E\u003C\u002Fa\u003E\u003Cscript\u003E(function(d,s){d.getElementById(\"licnt7D89\").src=\r\n\"https:\u002F\u002Fcounter.yadro.ru\u002Fhit?t12.1;r\"+escape(d.referrer)+\r\n((typeof(s)==\"undefined\")?\"\":\";s\"+s.width+\"*\"+s.height+\"*\"+\r\n(s.colorDepth?s.colorDepth:s.pixelDepth))+\";u\"+escape(d.URL)+\r\n\";h\"+escape(d.title.substring(0,150))+\";\"+Math.random()})\r\n(document,screen)\u003C\u002Fscript\u003E\u003C!--\u002FLiveInternet--\u003E","\u003Ca href=\"\u002Fpage\u002Fpravoobladateliam\"\u003EДля правообладателей\u003C\u002Fa\u003E","h3a","images_before","none","h3","category","both",77,"#ff0d00","\u003Cscript src=\"\u002F\u002Fyastatic.net\u002Fes5-shims\u002F0.0.2\u002Fes5-shims.min.js\"\u003E\u003C\u002Fscript\u003E\r\n\u003Cscript src=\"\u002F\u002Fyastatic.net\u002Fshare2\u002Fshare.js\"\u003E\u003C\u002Fscript\u003E\r\n\u003Cdiv class=\"ya-share2\" data-services=\"collections,gplus,vkontakte,facebook,odnoklassniki,gplus,twitter,moimir\" data-counter=\"\"\u003E\u003C\u002Fdiv\u003E","Разное",2,"Основы создания веб-страниц ",1,"Slaidy","ru","64x64","120x120","144x144","152x152","192x192","384x384","512x512")) равное число столбцов.
Строки открываются тегом

Align- выравнивание таблицы относительно документа. Возможные значения: center, left, right
Valign - выравнивает текст в таблице по вертикали. Значения: top, bottom, middle, baseline.
background=“имя файла“ строка, определяющая рисунок для заднего фона таблицы
bgcolor =цвет определяет задний фон таблицы
border толщина внешней рамки в пикселях. Если атрибут не указан, то таблица выводится без видимой рамки
bordercolor =цвет цвет рамки
Атрибуты для тега
Слайд 49
title =“Текст“ всплывающая подсказка
width = число ширина таблицы в процентах или
пикселях
height = число рекомендуемая
высота таблицы только в пикселях.
cellspacing = число расстояние
между ячейками
cellpadding = число расстояние
между содержимым и рамкой
colls = число заранее сообщает
браузеру количество столбцов
в таблице.
Атрибуты для тега
Слайд 50
Пример
cellpadding="10" cellspacing="10">
A
>

title =“Текст“ всплывающая подсказка
width = число ширина таблицы в процентах или пикселях
height = число рекомендуемая
высота таблицы только в пикселях.
cellspacing = число расстояние
между ячейками
cellpadding = число расстояние
между содержимым и рамкой
colls = число заранее сообщает
браузеру количество столбцов
в таблице.
Атрибуты для тега

Пример

Заголовок столбца 1
Заголовок столбца 2
Ячейка столбца 1, ряд 1
Ячейка столбца 2, ряд 1
Ячейка столбца 1, ряд 2
Ячейка столбца 2, ряд 2

width=150 height=120>
Морской котик
Жирафы
Леопард width=150 height=120>

Фреймы
Фрейм - область гипертекстового документа со своими полосами прокрутки. Фреймы позволяют нам открыть в окне броузера не один, а сразу несколько документов.
Надо указать, сколько документов отобразить, сколько места будет занимать каждый, и каким образом они будут располагаться. Фрейм-документ не содержит тэга body. Вместо него используется тег .

Пример
Документ делится на 3 строки (rows) Высота первой строки - 100 пикселов, третьего - 150, а второй занимает все оставшееся пространство.
Тэг frame сообщает какие документы будут в каждой строке: 1 строка – Главная.html,
2 строка-Меню,
3 строка-Адреса
Документ делится на 3 столбца (cols) Ширина первого столбца - 100 пикселов, второго - 150, а третий занимает все оставшееся пространство.

Атрибуты тега < frameset >:
Rows – число и размер строк;
Cols – число и размер столбцов;
Значения – список величин, определяющий в пикселях или в % значения для строк и (или) колонок.
При помощи rows разбиваем окно на строки и задаем какую высоту будет иметь каждая строка
При помощи cols разбиваем окно на столбцы и задаем какую ширину будет иметь каждый столбец.
Ширину и высоту можно задавать не только в пикселях, но и в процентах от общей ширины (высоты) окна:
Помните, что в сумме это все должно равняться 100%.
Слайд 57
Тег
Может появляться только в теге и определяет содержимое одиночного фрейма.
Атрибуты:
src=“URL”
- обязательный атрибут, указывает имя файла, который должен изображаться в нем.
name=«метка» - связывает с фреймом метку, которая может использоваться для ссылок на фрейм в атрибуте target тега
, таким образом можно изменить содержимое фрейма, используя гиперссылку в другом фрейме.
noresize - запрещает изменение размеров фрейма.
scrolling = yes или no – разрешает или запрещает появление полос прокрутки.

Тег
Может появляться только в теге и определяет содержимое одиночного фрейма.
Атрибуты:
src=“URL” - обязательный атрибут, указывает имя файла, который должен изображаться в нем.
name=«метка» - связывает с фреймом метку, которая может использоваться для ссылок на фрейм в атрибуте target тега
, таким образом можно изменить содержимое фрейма, используя гиперссылку в другом фрейме.
noresize - запрещает изменение размеров фрейма.
scrolling = yes или no – разрешает или запрещает появление полос прокрутки.

Вложение тегов
В тег … можно поместить еще один или несколько тегов .
Это позволяет организовать области с разным количеством строк и столбцов.
2.html
3.html
1.html

name=“f3”>
2.html
3.html
4.html
1.html
Вложение тегов

Навигация во фреймах
В каждую область фрейма должен быть загружен HTML- документ.
Если в нем есть гиперссылки, то они открываются в этом же фрейме.
Для того, чтобы перенаправить вывод документа в другой фрейм, нужно использовать:
Атрибут name в целевом теге
Атрибут target в теге

Меню:
Ссылка 1
Ссылка 2
Ссылка 3
Ссылка 4
Окно просмотра
Навигация во фреймах

Меню:
Ссылка 1
Ссылка 2
Ссылка 3
Ссылка 4
Окно просмотра
Файл menu.html:
…
…
Ссылка 1
Ссылка
2
Ссылка 3
Ссылка 4
…
Щелчок на соответствующей ссылке в левой части выведет документ в правый фрейм.
Навигация во фреймах

Список цветов:
aqua - бирюзовый; black - черный; blue - синий;
gray - серый; green - зеленый; lime - ярко-зеленый;
maroon - темно-красный; white - белый; navy - темно-синий;
olive - оливковый; purple - фиолетовый; red - красный;
silver - светло-серый; teal - ярко-голубой; yellow - желтый;
fuchsia - ярко-фиолетовый
brown - коричневый, orange - оранжевый, cyan - оттенок бирюзового,
pink - розовый