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

В языке HTML установлены следующие правила:
весь документ набирается только текстовыми символами (их коды понятны всем редакторам), т. е. его можно набрать в любом текстовом редакторе (например, "Блокнот", "WordPad");
символы и конструкции, которые непонятны браузеру, игнорируются;
в текст документа можно добавлять разнообразные команды, которые указывают, как следует изображать на экране тот или иной фрагмент текста, или обеспечивают спецэффекты. Эти команды называют тегами. Они так же, как и документ, набираются текстовыми символами, но отделяются от него угловыми скобками: < >;
файлы c HTML-кодом должны помечаться расширением .html или .htm

Структура тегов
Каждый тег обязательно содержит пару угловых скобок < >, между которыми находится ключевое слово, обозначающее основную функцию тега.
Например, ключевое слово HR в теге
означает, что тег вставляет в документ серую горизонтальную линию (Horizontal Row) по всей ширине страницы и толщиной в один пиксел.
Действие тега детализируется с помощью атрибутов.
Например, применительно к тегу
можно уточнить, какой длины, толщины и цвета должна быть линия.

Атрибуты размещают после ключевого слова и перечисляют в произвольном порядке через пробел.
После каждого атрибута ставят знак = и нужное значение.
Например, тег
означает, что в документ следует вставить горизонтальную линию, которая должна доходить только до середины строки и иметь ширину не один, а четыре пиксела.

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

Структура документа HTML
Каждый HTML-документ состоит из трех главных частей:
Объявление HTML-кода – контейнер …
Заголовок документа – контейнер …
Тело документа – контейнер …

В заголовок помещаются теги, определяющие информацию о документе в целом. Наиболее употребительный из них – контейнер
:<br><TITLE> Краткая расшифровка содержания документа (не более 64 символов)
.
Пример.
Гостиницы для участников конференции

В разделе «тело документа» размещается содержание документа, которое выдается в рабочее окно броузера. Атрибуты тега задают следующие свойства:
TEXT – цвет текста там, где он не указан специальными средствами. По умолчанию черный.
BGCOLOR – цвет фона. По умолчанию белый.
BACKGROUND – фоновое изображение (аналогично рисунку на Рабочем столе). Значением является URL файла–изображения.
LINK,VLINK, ALINK – соответственно цвета непосещенных, посещенных и активных в данный момент гиперссылок.
Примеры:

Теги форматирования шрифта

Атрибуты тега
SIZE – размер букв, возможные значения: 1, 2, 3,…, 7.
По умолчанию 3;
COLOR – цвет шрифта. Можно указывать шестнадцатеричными кодами (см. [2, 3, 5]) или английскими словами (см. табл. 5 Приложения). По умолчанию BLACK;
FACE – изменение типа шрифта, возможные значения: ARIAL, COURIER и т. д. По умолчанию VERDANA.

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

Помимо перечисленных выше тегов существуют шесть контейнерных тегов, удобных для оформления заголовков:
...
,
...
, ... ,
…
.
Заголовки отличаются от текста и между собой толщиной и высотой букв (в заголовке
самые крупные символы, в
– самые мелкие), а также увеличением интервала по вертикали между заголовком и прочей информацией.
Атрибут ALIGN управляет выравниванием заголовков по горизонтали. По умолчанию он принимает значение LEFT. Другие возможные значения: CENTER, RIGHT.
Пример:
Лабораторная работа №1
Результат действия тега :
Лабораторная работа №1

Теги выделения смысловых частей текста
Абзацы в тексте выделяются контейнером
…
.
Атрибут ALIGN
задает выравнивание по горизонтали. По умолчанию он принимает значение LEFT. Другие возможные значения: CENTER, RIGHT. При просмотре браузером абзацы отделяются друг от друга пустой строкой.
Примеры:
Этот абзац расположен слева
Этот абзац по центру
А вот этот абзац справа
Этот абзац расположен слева
Этот абзац по центру
А вот этот абзац справа

Чтобы перейти на новую строку, не вставляя пустую строку в текст, применяется тег
. Закрывающего тега у него нет.
Иногда полезно разделять смысловые части документа горизонтальной чертой. Это делается с помощью одиночного тега
. Его атрибуты:
SIZE – толщина линии в пикселах. По умолчанию 1 пиксел.
WIDTH – длина линии в пикселах или процентах от ширины экрана. По умолчанию 100%.
ALIGN – выравнивание линии, возможные значения: LEFT, CENTER, RIGHT. По умолчанию LEFT.
COLOR – цвет линии, возможные значения: см. табл. По умолчанию GRAY.
NOSHADE – линия рисуется без тени. По умолчанию тень есть.

Пример. Код, в котором использованы теги
и
:
Жизненная позиция
NOSHADE WIDTH=250>
Хорошо на свете жить,
Информатику учить!
В окне браузера этот код изображается так:
Жизненная позиция
Хорошо на свете жить,
Информатику учить!

Контейнер
…
используют для того, чтобы добавить к выделенному им тексту
поля со всех четырех сторон (сверху и снизу – по пустой строке, слева и справа – шириной в 5 знаков).

Еще один полезный контейнер –
…
(PREformatted text – предварительно форматированный текст).
Обычно
броузеры при выдаче текста на экран учитывают в цепочке идущих подряд пробелов только первый и игнорируют символы конца строки. Однако то, что находится в контейнере
, выводится в окне браузера точно так, как оно расположено в коде HTML-документа.

Пример.
Текст кода оформлен так:
Чтобы стихотворение красиво
смотрелось в окне браузера,
вовсе не обязательно
использовать
тег <BR>!
В окне браузера текст выглядит так:
Чтобы стихотворение красиво
смотрелось в окне браузера,
вовсе не обязательно использовать
тег
!

Оформление списков
Для того, чтобы оформить фрагмент документа в виде маркированного списка, его
помещают в контейнер
…
(Unordered List).
Для нумерованного – в контейнер
…
(Оrdered List).
Затем текст в контейнере разбивается на отдельные пункты списка тегами
(LIst item – элемент списка). Закрывающий тег
в конце каждого пункта ставить необязательно.
В маркированном списке все пункты автоматически помечаются одинаковыми маркерами, в нумерованном – элементы нумерует сам браузер.

Примеры кода:

В теге
могут использоваться следующие атрибуты:
TYPE – определяет стиль оформления меток
для элементов списка, подробнее ниже;
START – (только для нумерованного списка
) определяет значение первого элемента списка, задается всегда числом (по умолчанию 1). В зависимости от значения атрибута TYPE этому числу сопоставляются разные символы, подробнее ниже;
VALUE – (только для метки
списка
) устанавливает номер текущего элемента списка. Как и в предыдущем случае, метка пункта может быть нечисловой, хотя значение атрибута – всегда число.

Для нумерованного списка в зависимости от стиля нумерации значением атрибута TYPE могут быть:
1– арабские цифры (1,2,3,...)
a– строчные буквы (a, b, c,…)
A– прописные буквы (A,B,C,...)
i– римские цифры строчные (i,ii,iii,...)
I– римские цифры прописные (I,II,III,...)
По умолчанию значения TYPE устанавливаются в зависимости от степени вложенности списка.
Число, указанное в атрибуте START, показывает порядковый номер элемента в ряду знаков, заданных в TYPE. С этого элемента следует начинать нумерацию пунктов списка.

Создание таблиц
Простая таблица

Если таблица имеет сложную структуру и какие-то ячейки занимают несколько столбцов или строк,
следует в тегах или добавить атрибуты соответственно COLSPAN=n или ROWSPAN=n, где n – количество столбцов (строк), на которые растянута данная ячейка.
Например, COLSPAN=3 означает, что ячейка по ширине будет простираться на 3 колонки, ROWSPAN=2 означает, что ячейка по высоте занимает две строки таблицы.

Пример таблицы сложной структуры
1
2
3
4
5
6
7
8
9
10
11
12

Таблица создается по строкам. Для каждой строки создается контейнер …, определяющий, какие ячейки
и информация должны находиться в этой строке.
Атрибут ALIGN со значениями LEFT, CENTER или RIGHT задает горизонтальное выравнивание во всех ячейках строки.
Атрибут VALIGN со значениями TOP, MIDDLE или BOTTOM – вертикальное выравнивание (по умолчанию MIDDLE – по центру).

Для оформления ячеек используются два вида контейнеров: … (Table Head) и … (Table
Data).
Первый свою информацию выравнивает по центру и изображает жирным шрифтом, второй выравнивает по левому краю и использует обычный шрифт.
Обычно … используют для ячеек с заголовками строк или столбцов, а … – для ячеек с данными таблицы.
Можно также оставить ячейку пустой, но, чтобы она была отображена на экране, следует внести в нее &-последовательность

Основные атрибуты тега
:
WIDTH – определяет ширину таблицы в пикселах или процентах,
по умолчанию ширина таблицы определяется содержимым ячеек;
ALIGN – определяет расположение таблицы в документе. По умолчанию таблица прижата к левому краю страницы. Допустимые значения атрибута: LEFT , CENTER и RIGHT;
BORDER – устанавливает толщину рамки в пикселах. По умолчанию – 0 (таблица рисуется без рамки);
BORDERCOLOR – устанавливает цвет рамки, по умолчанию черный. Цвет можно задавать английским словом или шестнадцатеричным числом;
CELLSPACING – определяет расстояние между рамками ячеек таблицы в пикселах;
CELLPADDING – определяет промежуток в пикселах между рамкой ячейки и текстом внутри нее;
BGCOLOR – устанавливает цвет фона для всей таблицы. По умолчанию белый. Цвет можно задавать английским словом или шестнадцатеричным числом
BACKGROUND – заполняет фон таблицы изображением. Значением атрибута является URL нужного файла.
Слайд 29
Тег
, открывающий строку таблицы, может иметь такие атрибуты:
ALIGN – устанавливает горизонтальное
выравнивание текста во всех ячейках строки. Может принимать значения LEFT (по умолчанию), CENTER и RIGHT;
VALIGN – устанавливает вертикальное выравнивание текста в ячейках строки. Допустимые значения: TOP (выравнивание по верхнему краю), MIDDLE (выравнивание по центру – это значение принимается по умолчанию), BOTTOM (по нижнему краю);
BGCOLOR – устанавливает цвет фона для строки
Слайд 30
Для тегов
или
предусмотрены следующие атрибуты:
ALIGN – устанавливает горизонтальное выравнивание
текста в ячейке. Может принимать значение LEFT, CENTER и RIGHT;
VALIGN – устанавливает вертикальное выравнивание текста в ячейке. Допустимые значения: TOP, CENTER (это значение принимается по умолчанию), BOTTOM;
WIDTH – определяет ширину ячейки в пикселах;
HEIGHT – определяет высоту ячейки в пикселах;
NOWRAP – присутствие этого атрибута показывает, что текст должен размещаться в одну строку;
BGCOLOR – устанавливает цвет фона ячейки
BACKGROUND – заполняет фон ячейки изображением. Значением атрибута является URL нужного файла.
Слайд 31
Использование изображений
Чтобы использовать рисунок в качестве фона, применяют атрибут BACKGROUND. Его можно
указывать в теге и табличных тегах , ,
,
Если размер рисунка больше размера площади, которую следует закрыть фоном, то берется левая верхняя часть изображения, если меньше – рисунок повторяется, пока вся отведенная под фон площадь не будет закрыта, т. е. заданное изображение используется как кафельная плитка.
Слайд 32
Рисунок в качестве самостоятельного объекта (логотип фирмы, фотография и т. п.) вставляется тегом
(IMaGe – изображение). Обязательный атрибут – SRC (SouRCe – источник). Значением этого атрибута является URL файла с изображением.
Примеры.
– рисунок picture.gif находится в том же каталоге, что и текущий документ;
– из текущего каталога перейти в подкаталог images и взять файл picture.gif оттуда;
– указание полного пути к файлу. Обычно применяется, если рисунок находится на другом сервере или используется файл с другого сайта.
Слайд 33
Остальные атрибуты тега
BORDER=n – рамка вокруг рисунка, где n – ее
толщина в пикселах. При n = 0 (значение по умолчанию) рамка не рисуется;
WIDTH=n – задается ширина изображения в пикселах или в процентах от ширины экрана броузера (тогда после n следует знак %). По умолчанию – естественная ширина;
HEIGHT=n – высота изображения в пикселах или в процентах от высоты экрана. По умолчанию – естественная высота;
HSPACE=n – отступ слева и справа от картинки шириной в n пикселов (т.е. свободное пространство между рисунком и текстом или чем-то иным). По умолчанию 0;
VSPACE=n – вертикальный отступ от картинки в пикселах. По умолчанию 0;
Слайд 34
Теги гиперссылок
Ссылки создаются с помощью контейнера
…
(Add – добавлять). Обязательный
атрибут – HREF (Hiper REFerence – гиперссылка). При минимальном наборе атрибутов структура ссылки выглядит так:
якорь ссылки
Примеры.
нужный документ
– по двойному щелчку на тексте нужный документ обозреватель раскроет документ filename.html, находящийся в том же каталоге, что и текущий документ;
нужный документ
– ссылка с указанием полного адреса файла на другом компьютере. По двойному щелчку на тексте нужный документ установится связь с нужным компьютером и раскроется документ index.html, находящийся там по адресу /business/fax/339/.
Слайд 35
Атрибуты тега
:
TITLE ="поясняющий текст"– всплывающая подсказка с пояснением к ссылке;
TARGET="имя
окна" – указывает, в каком окне следует раскрывать вызванный документ
Слайд 36
Пример
Пишите письма
автору
В окне браузера
появится текст:
Пишите письма автору
Если навести курсор на слово автору, то появится всплывающая подсказка Ссылка на почтовый ящик Администратора сайта.
По двойному щелчку на слове автору будет запущена почтовая программа в режиме создания сообщений, и в поле Кому автоматически будет введен адрес [e-mail]
Слайд 37
Внутренние ссылки
Ссылки можно делать не только на внешнюю информацию, но и на внутренние
места документа. Это облегчает просмотр больших документов.
Пример:
Пункт Содержания со ссылкой на Главу 1 должен выглядеть так:
Часть1 Форматирование текста
Слайд 38
Разделение экрана на кадры
Кадры (другое название фреймы) – это области экрана, в
каждую из которых можно поместить отдельный HTML-документ.
Разделение окна на кадры выполняется с помощью HTML-файла, в котором контейнер … заменен на … .
Атрибуты этого тега определяют, как разбивается экран.
Слайд 39
Примеры:
– экран разбивается на три колонки, ширина которых задана в процентах
от ширины окна броузера;
– экран разбивается на две строки, высота которых указана в процентах от высоты окна броузера.
Заполнением кадров управляют теги . Обязательный атрибут – SRC="URL документа, загружаемого в кадр".
Слайд 40
Пример
Разбивка экрана на кадры
NAME="флаг" SRC="флаг.jpg">
Имя файла: Основы-HTML.pptx
Количество просмотров: 65
Количество скачиваний: 0
Скачать
- Предыдущая
Особливості організації боротьби з БпЛА
Следующая -
Виды IP адресов
Похожие презентации
Нехимические зависимости
Мастер-класс по написанию литературного обзора
Понятие как форма мышления
Конструкции языка PHP
Технологии мультимедиа
Системы автоматизированного проектирования
Создание веб-сайта. Практическая работа №10
Маршрутизаторы, функция VPN
Коммуникативная природа информационного общества. Понятие коммуникации
Мобильный агент
Интеллектуальные события. Интеллектуальный суверенитет России
Технология клиент-сервер
Типовые клиенты доступа к базе данных на основе различных технологий
Використання інтернет-ресурсів для спільної роботи. Рівні та способи доступу до ресурсів
Списки и таблицы в HTML
Своя игра. Викторина. Шаблон
Уровень вершины дерева (3 кл.)
Информационные технологии в образовании
Электронная библиотека Национальной библиотеки Республики Саха (Якутия)
Презентация урок №20_Редактирование и устройства ввода графического изображения_5класс
Рабочий стол в реальном и виртуальном мире
Access 2010
Программирование на языке Python. Простейшие программы
Беспроводная связь
Программирование на языке высокого уровня
Реляциялық деректер қоры және SQL тілі
Java. (Лекция 4)
Электронные образовательные ресурсы нового поколения
Обратная связь
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){return {data:{meta:{result:{meta:{h1:l,main_text:a,main_title:m,main_description:n,main_keywords:o,main_image:a},app:{logo_image:p,logo_image_width:q,logo_image_height:r,logo_text:a,image_width_full:s,image_width_min:t,recaptcha_key:u,yandex_search:v,ya_context:c,banner_1:a,banner_2:a,banner_3:a,banner_4:a,banner_5:a,banner_6:a,banner_7:a,banner_8:a,banner_9:a,banner_10:a,email:w,footer_before:a,footer:a,dark_theme:c,strategy:{image_alt_words:h,item_slide_header:x,item_images:y,item_images_tag:z,item_words_h3:c,item_words_tag:A,item_words_1:h,routing:B,item_slide_skipping:C,item_download_timeout:D,item_slider_width:E,item_show_pdf:e,item_show_contents:e,item_show_filename:e},colors:{header_text:j,header_bg:i,accent:i}},social:F}},item:{result:{id:201527,name:k,category:G,count:41,jpg:"jpg\u002F201527",hits:65,download:b,h1:"Основы HTML презентация",meta:{h1:k,title:k,description:"Основы HTML презентация на тему, доклад, Информатика",keywords:"Основы HTML, презентация, доклад, проект, скачать, на тему, PowerPoint, урок, класс, школа, Информатика",download_link:a},text:"Вы можете изучить и скачать доклад-презентацию на тему Презентация на тему Основы HTML из раздела Информатика. Презентация на заданную тему содержит 41 слайдов. Для просмотра воспользуйтесь проигрывателем, если материал оказался полезным для Вас - поделитесь им с друзьями с помощью социальных кнопок и добавьте наш сайт презентаций в закладки!",seo_text:"\u003Cp\u003EВ языке HTML установлены следующие правила:\u003Cbr\u003E\u003Cp\u003Eвесь документ набирается только текстовыми символами (их коды понятны всем редакторам), т. е. его можно набрать в любом текстовом редакторе (например, \"Блокнот\", \"WordPad\");\u003Cbr\u003Eсимволы и конструкции, ко",file:"Основы-HTML.pptx",texts:["\u003Cp\u003EЛекция\u003Cbr\u003E\u003Cp\u003EОСНОВЫ HTML\u003Cbr\u003E","\u003Cp\u003EВ языке HTML установлены следующие правила:\u003Cbr\u003E\u003Cp\u003Eвесь документ набирается только текстовыми символами (их коды понятны всем редакторам), т. е. его можно набрать в любом текстовом редакторе (например, \"Блокнот\", \"WordPad\");\u003Cbr\u003Eсимволы и конструкции, которые непонятны браузеру, игнорируются;\u003Cbr\u003Eв текст документа можно добавлять разнообразные команды, которые указывают, как следует изображать на экране тот или иной фрагмент текста, или обеспечивают спецэффекты. Эти команды называют тегами. Они так же, как и документ, набираются текстовыми символами, но отделяются от него угловыми скобками: \u003C \u003E;\u003Cbr\u003Eфайлы c HTML-кодом должны помечаться расширением .html или .htm \u003Cbr\u003E","\u003Cp\u003EСтруктура тегов \u003Cbr\u003E\u003Cp\u003EКаждый тег обязательно содержит пару угловых скобок \u003C \u003E, между которыми находится ключевое слово, обозначающее основную функцию тега. \u003Cbr\u003EНапример, ключевое слово HR в теге \u003CHR\u003E означает, что тег вставляет в документ серую горизонтальную линию (Horizontal Row) по всей ширине страницы и толщиной в один пиксел.\u003Cbr\u003EДействие тега детализируется с помощью атрибутов. \u003Cbr\u003EНапример, применительно к тегу \u003CHR\u003E можно уточнить, какой длины, толщины и цвета должна быть линия. \u003Cbr\u003E","\u003Cp\u003EАтрибуты размещают после ключевого слова и перечисляют в произвольном порядке через пробел. \u003Cbr\u003EПосле каждого атрибута ставят знак = и нужное значение. \u003Cbr\u003EНапример, тег \u003CHR WIDTH=50% SIZE=4\u003E означает, что в документ следует вставить горизонтальную линию, которая должна доходить только до середины строки и иметь ширину не один, а четыре пиксела. \u003Cbr\u003E","\u003Cp\u003EМногие теги являются парными. Открывающий тег включает какое-нибудь действие, закрывающий прекращает его. \u003Cbr\u003EВ этом случае ключевое слово у обоих тегов одинаковое, но в открывающем теге дополнительно перечисляются все необходимые атрибуты, а в закрывающем атрибутов нет, и перед ключевым словом ставится знак \u002F. \u003Cbr\u003EПарные теги называются контейнерами. \u003Cbr\u003EНапример, контейнер \u003Cbr\u003E\u003CB\u003EЯ изучаю язык HTML\u003C\u002FB\u003E \u003Cbr\u003Eозначает, что текст Я изучаю язык HTML следует изобразить жирным шрифтом, а дальнейшие символы – так, как до него.\u003Cbr\u003E","\u003Cp\u003EСтруктура документа HTML \u003Cbr\u003E\u003Cp\u003EКаждый HTML-документ состоит из трех главных частей:\u003Cbr\u003EОбъявление HTML-кода – контейнер \u003CHTML\u003E …\u003C\u002FHTML\u003E\u003Cbr\u003EЗаголовок документа – контейнер \u003CHEAD\u003E … \u003C\u002FHEAD\u003E\u003Cbr\u003EТело документа – контейнер \u003CBODY\u003E … \u003C\u002FBODY\u003E\u003Cbr\u003E\u003CHTML\u003E\u003Cbr\u003E\u003CHEAD\u003E\u003Cbr\u003E\u003C\u002FHEAD\u003E\u003Cbr\u003E\u003CBODY\u003E\u003Cbr\u003E\u003C\u002FBODY\u003E\u003Cbr\u003E\u003C\u002FHTML\u003E\u003Cbr\u003E","\u003Cp\u003EВ заголовок помещаются теги, определяющие информацию о документе в целом. Наиболее употребительный из них – контейнер \u003CTITLE\u003E:\u003Cbr\u003E\u003CTITLE\u003E Краткая расшифровка содержания документа (не более 64 символов) \u003C\u002FTITLE\u003E. \u003Cbr\u003EПример.\u003Cbr\u003E\u003CTITLE\u003E Гостиницы для участников конференции \u003C\u002FTITLE\u003E\u003Cbr\u003E","\u003Cp\u003EВ разделе «тело документа» размещается содержание документа, которое выдается в рабочее окно броузера. Атрибуты тега \u003CBODY\u003E задают следующие свойства:\u003Cbr\u003ETEXT – цвет текста там, где он не указан специальными средствами. По умолчанию черный.\u003Cbr\u003EBGCOLOR – цвет фона. По умолчанию белый.\u003Cbr\u003EBACKGROUND – фоновое изображение (аналогично рисунку на Рабочем столе). Значением является URL файла–изображения.\u003Cbr\u003ELINK,VLINK, ALINK – соответственно цвета непосещенных, посещенных и активных в данный момент гиперссылок. \u003Cbr\u003EПримеры: \u003Cbr\u003E\u003CBODY TEXT=SILVER BGCOLOR=NAVY\u003E\u003Cbr\u003E\u003CBODY TEXT=SILVER BACKGROUND=\"море.jpg\"\u003E \u003Cbr\u003E","\u003Cp\u003EТеги форматирования шрифта \u003Cbr\u003E","\u003Cp\u003EАтрибуты тега \u003CFONT\u003E \u003Cbr\u003E\u003Cp\u003ESIZE – размер букв, возможные значения: 1, 2, 3,…, 7. По умолчанию 3;\u003Cbr\u003ECOLOR – цвет шрифта. Можно указывать шестнадцатеричными кодами (см. [2, 3, 5]) или английскими словами (см. табл. 5 Приложения). По умолчанию BLACK;\u003Cbr\u003EFACE – изменение типа шрифта, возможные значения: ARIAL, COURIER и т. д. По умолчанию VERDANA.\u003Cbr\u003E","\u003Cp\u003EТеги могут комбинироваться, но при этом надо следить, чтобы контейнеры имели вложенную структуру (контейнер, открытый позже, должен быть закрыт до того, как будет закрыт внешний). \u003Cbr\u003EНапример, для комбинации жирного и наклонного шрифтов можно использовать такой код: \u003Cbr\u003E\u003CB\u003E \u003CI\u003E пример \u003C\u002FI\u003E \u003C\u002FB\u003E \u003Cbr\u003EВ окне броузера мы получим: пример.\u003Cbr\u003E","\u003Cp\u003EПомимо перечисленных выше тегов существуют шесть контейнерных тегов, удобных для оформления заголовков: \u003CH1\u003E...\u003C\u002FH1\u003E, \u003CH2\u003E...\u003C\u002FH2\u003E, ... , \u003CH6\u003E…\u003C\u002FH6\u003E. \u003Cbr\u003EЗаголовки отличаются от текста и между собой толщиной и высотой букв (в заголовке \u003CH1\u003E самые крупные символы, в \u003CH6\u003E – самые мелкие), а также увеличением интервала по вертикали между заголовком и прочей информацией. \u003Cbr\u003EАтрибут ALIGN управляет выравниванием заголовков по горизонтали. По умолчанию он принимает значение LEFT. Другие возможные значения: CENTER, RIGHT.\u003Cbr\u003E Пример:\u003Cbr\u003E\u003CH4 ALIGN=CENTER\u003E Лабораторная работа №1 \u003C\u002FH4\u003E \u003Cbr\u003EРезультат действия тега :\u003Cbr\u003EЛабораторная работа №1\u003Cbr\u003E","\u003Cp\u003EТеги выделения смысловых частей текста \u003Cbr\u003E\u003Cp\u003EАбзацы в тексте выделяются контейнером \u003CP\u003E…\u003C\u002FP\u003E. \u003Cbr\u003EАтрибут ALIGN задает выравнивание по горизонтали. По умолчанию он принимает значение LEFT. Другие возможные значения: CENTER, RIGHT. При просмотре браузером абзацы отделяются друг от друга пустой строкой. \u003Cbr\u003E Примеры:\u003Cbr\u003E\u003CP\u003E Этот абзац расположен слева \u003C\u002FP\u003E\u003Cbr\u003E\u003CP ALIGN=CENTER\u003E Этот абзац по центру \u003C\u002FP\u003E\u003Cbr\u003E\u003CP ALIGN=RIGHT\u003E А вот этот абзац справа \u003C\u002FP\u003E\u003Cbr\u003EЭтот абзац расположен слева\u003Cbr\u003EЭтот абзац по центру\u003Cbr\u003EА вот этот абзац справа\u003Cbr\u003E","\u003Cp\u003EЧтобы перейти на новую строку, не вставляя пустую строку в текст, применяется тег \u003CBR\u003E. Закрывающего тега у него нет.\u003Cbr\u003EИногда полезно разделять смысловые части документа горизонтальной чертой. Это делается с помощью одиночного тега \u003CHR\u003E. Его атрибуты: \u003Cbr\u003ESIZE – толщина линии в пикселах. По умолчанию 1 пиксел.\u003Cbr\u003EWIDTH – длина линии в пикселах или процентах от ширины экрана. По умолчанию 100%.\u003Cbr\u003EALIGN – выравнивание линии, возможные значения: LEFT, CENTER, RIGHT. По умолчанию LEFT.\u003Cbr\u003ECOLOR – цвет линии, возможные значения: см. табл. По умолчанию GRAY.\u003Cbr\u003ENOSHADE – линия рисуется без тени. По умолчанию тень есть. \u003Cbr\u003E","\u003Cp\u003EПример. Код, в котором использованы теги \u003CBR\u003E и \u003CHR\u003E: \u003Cbr\u003E\u003CB\u003E Жизненная позиция \u003C\u002FB\u003E\u003Cbr\u003E\u003CHR NOSHADE WIDTH=250\u003E\u003Cbr\u003EХорошо на свете жить, \u003CBR\u003E\u003Cbr\u003EИнформатику учить! \u003CBR\u003E\u003Cbr\u003E\u003CHR SIZE=4 WIDTH=50% ALIGN=CENTER \u003Cbr\u003EВ окне браузера этот код изображается так:\u003Cbr\u003EЖизненная позиция\u003Cbr\u003EХорошо на свете жить,\u003Cbr\u003EИнформатику учить!\u003Cbr\u003E","\u003Cp\u003EКонтейнер \u003CBLOCKQUOTE\u003E … \u003C\u002FBLOCKQUOTE\u003E используют для того, чтобы добавить к выделенному им тексту поля со всех четырех сторон (сверху и снизу – по пустой строке, слева и справа – шириной в 5 знаков). \u003Cbr\u003E","\u003Cp\u003EЕще один полезный контейнер – \u003CPRE\u003E…\u003C\u002FPRE\u003E (PREformatted text – предварительно форматированный текст). \u003Cbr\u003EОбычно броузеры при выдаче текста на экран учитывают в цепочке идущих подряд пробелов только первый и игнорируют символы конца строки. Однако то, что находится в контейнере \u003CPRE\u003E, выводится в окне браузера точно так, как оно расположено в коде HTML-документа. \u003Cbr\u003E","\u003Cp\u003EПример.\u003Cbr\u003E\u003Cp\u003EТекст кода оформлен так:\u003Cbr\u003E\u003CPRE\u003E\u003Cbr\u003EЧтобы стихотворение красиво\u003Cbr\u003E смотрелось в окне браузера,\u003Cbr\u003E вовсе не обязательно использовать\u003Cbr\u003E тег &lt;BR&gt;!\u003Cbr\u003E\u003C\u002FPRE\u003E\u003Cbr\u003EВ окне браузера текст выглядит так:\u003Cbr\u003EЧтобы стихотворение красиво\u003Cbr\u003E смотрелось в окне браузера,\u003Cbr\u003E вовсе не обязательно использовать\u003Cbr\u003E тег \u003CBR\u003E!\u003Cbr\u003E","\u003Cp\u003EОформление списков \u003Cbr\u003E\u003Cp\u003EДля того, чтобы оформить фрагмент документа в виде маркированного списка, его помещают в контейнер \u003CUL\u003E… \u003C\u002FUL\u003E (Unordered List). \u003Cbr\u003EДля нумерованного – в контейнер \u003COL\u003E … \u003C\u002FOL\u003E (Оrdered List). \u003Cbr\u003EЗатем текст в контейнере разбивается на отдельные пункты списка тегами \u003CLI\u003E (LIst item – элемент списка). Закрывающий тег \u003C\u002FLI\u003E в конце каждого пункта ставить необязательно.\u003Cbr\u003E В маркированном списке все пункты автоматически помечаются одинаковыми маркерами, в нумерованном – элементы нумерует сам браузер. \u003Cbr\u003E","\u003Cp\u003EПримеры кода:\u003Cbr\u003E","\u003Cp\u003EВ теге \u003COL\u003E могут использоваться следующие атрибуты: \u003Cbr\u003E\u003Cp\u003ETYPE – определяет стиль оформления меток для элементов списка, подробнее ниже;\u003Cbr\u003ESTART – (только для нумерованного списка \u003COL\u003E) определяет значение первого элемента списка, задается всегда числом (по умолчанию 1). В зависимости от значения атрибута TYPE этому числу сопоставляются разные символы, подробнее ниже;\u003Cbr\u003EVALUE – (только для метки \u003CLI\u003E списка \u003COL\u003E) устанавливает номер текущего элемента списка. Как и в предыдущем случае, метка пункта может быть нечисловой, хотя значение атрибута – всегда число.\u003Cbr\u003E","\u003Cp\u003EДля нумерованного списка в зависимости от стиля нумерации значением атрибута TYPE могут быть: \u003Cbr\u003E1– арабские цифры (1,2,3,...)\u003Cbr\u003Ea– строчные буквы (a, b, c,…)\u003Cbr\u003EA– прописные буквы (A,B,C,...)\u003Cbr\u003Ei– римские цифры строчные (i,ii,iii,...)\u003Cbr\u003EI– римские цифры прописные (I,II,III,...)\u003Cbr\u003EПо умолчанию значения TYPE устанавливаются в зависимости от степени вложенности списка.\u003Cbr\u003EЧисло, указанное в атрибуте START, показывает порядковый номер элемента в ряду знаков, заданных в TYPE. С этого элемента следует начинать нумерацию пунктов списка.\u003Cbr\u003E","\u003Cp\u003EСоздание таблиц \u003Cbr\u003E\u003Cp\u003EПростая таблица\u003Cbr\u003E","\u003Cp\u003EЕсли таблица имеет сложную структуру и какие-то ячейки занимают несколько столбцов или строк, следует в тегах \u003CTH\u003E или \u003CTD\u003E добавить атрибуты соответственно COLSPAN=n или ROWSPAN=n, где n – количество столбцов (строк), на которые растянута данная ячейка. \u003Cbr\u003EНапример, COLSPAN=3 означает, что ячейка по ширине будет простираться на 3 колонки, ROWSPAN=2 означает, что ячейка по высоте занимает две строки таблицы. \u003Cbr\u003E","\u003Cp\u003EПример таблицы сложной структуры\u003Cbr\u003E\u003Cp\u003E\u003CTABLE ВORDER=1\u003E\u003Cbr\u003E \u003CTR\u003E\u003Cbr\u003E \u003CTH\u003E 1 \u003C\u002FTH\u003E \u003CTH COLSPAN=3\u003E 2 \u003C\u002FTH\u003E\u003Cbr\u003E \u003C\u002FTR\u003E\u003Cbr\u003E \u003CTR\u003E \u003Cbr\u003E \u003CTH ROWSPAN=2\u003E 3 \u003C\u002FTH\u003E \u003CTH\u003E 4 \u003C\u002FTH\u003E\u003Cbr\u003E \u003CTH\u003E 5 \u003C\u002FTH\u003E \u003CTH \u003E 6 \u003C\u002FTH\u003E\u003Cbr\u003E \u003C\u002FTR\u003E\u003Cbr\u003E \u003CTR\u003E\u003Cbr\u003E \u003CTH\u003E 7 \u003C\u002FTH\u003E \u003CTH COLSPAN=2\u003E 8 \u003C\u002FTH\u003E \u003Cbr\u003E \u003C\u002FTR\u003E\u003Cbr\u003E \u003CTR\u003E\u003Cbr\u003E \u003CTH\u003E 9 \u003C\u002FTH\u003E \u003CTH\u003E 10 \u003C\u002FTH\u003E \u003CTH\u003E 11 \u003C\u002FTH\u003E\u003Cbr\u003E \u003CTH\u003E 12 \u003C\u002FTH\u003E\u003Cbr\u003E \u003C\u002FTR\u003E\u003Cbr\u003E\u003C\u002FTABLE\u003E \u003Cbr\u003E","\u003Cp\u003EТаблица создается по строкам. Для каждой строки создается контейнер \u003CTR\u003E…\u003C\u002FTR\u003E, определяющий, какие ячейки и информация должны находиться в этой строке. \u003Cbr\u003EАтрибут ALIGN со значениями LEFT, CENTER или RIGHT задает горизонтальное выравнивание во всех ячейках строки. \u003Cbr\u003EАтрибут VALIGN со значениями TOP, MIDDLE или BOTTOM – вертикальное выравнивание (по умолчанию MIDDLE – по центру).\u003Cbr\u003E","\u003Cp\u003EДля оформления ячеек используются два вида контейнеров: \u003CTH\u003E…\u003C\u002FTH\u003E (Table Head) и \u003CTD\u003E…\u003C\u002FTD\u003E (Table Data). \u003Cbr\u003EПервый свою информацию выравнивает по центру и изображает жирным шрифтом, второй выравнивает по левому краю и использует обычный шрифт.\u003Cbr\u003E Обычно \u003CTH\u003E…\u003C\u002FTH\u003E используют для ячеек с заголовками строк или столбцов, а \u003CTD\u003E…\u003C\u002FTD\u003E – для ячеек с данными таблицы. \u003Cbr\u003EМожно также оставить ячейку пустой, но, чтобы она была отображена на экране, следует внести в нее &-последовательность &nbsp; \u003Cbr\u003E","\u003Cp\u003EОсновные атрибуты тега \u003CTABLE\u003E: \u003Cbr\u003E\u003Cp\u003EWIDTH – определяет ширину таблицы в пикселах или процентах, по умолчанию ширина таблицы определяется содержимым ячеек; \u003Cbr\u003EALIGN – определяет расположение таблицы в документе. По умолчанию таблица прижата к левому краю страницы. Допустимые значения атрибута: LEFT , CENTER и RIGHT; \u003Cbr\u003EBORDER – устанавливает толщину рамки в пикселах. По умолчанию – 0 (таблица рисуется без рамки); \u003Cbr\u003EBORDERCOLOR – устанавливает цвет рамки, по умолчанию черный. Цвет можно задавать английским словом или шестнадцатеричным числом; \u003Cbr\u003ECELLSPACING – определяет расстояние между рамками ячеек таблицы в пикселах; \u003Cbr\u003ECELLPADDING – определяет промежуток в пикселах между рамкой ячейки и текстом внутри нее; \u003Cbr\u003EBGCOLOR – устанавливает цвет фона для всей таблицы. По умолчанию белый. Цвет можно задавать английским словом или шестнадцатеричным числом \u003Cbr\u003E BACKGROUND – заполняет фон таблицы изображением. Значением атрибута является URL нужного файла. \u003Cbr\u003E","\u003Cp\u003EТег \u003CTR\u003E, открывающий строку таблицы, может иметь такие атрибуты: \u003Cbr\u003E\u003Cp\u003EALIGN – устанавливает горизонтальное выравнивание текста во всех ячейках строки. Может принимать значения LEFT (по умолчанию), CENTER и RIGHT; \u003Cbr\u003EVALIGN – устанавливает вертикальное выравнивание текста в ячейках строки. Допустимые значения: TOP (выравнивание по верхнему краю), MIDDLE (выравнивание по центру – это значение принимается по умолчанию), BOTTOM (по нижнему краю); \u003Cbr\u003EBGCOLOR – устанавливает цвет фона для строки \u003Cbr\u003E","\u003Cp\u003EДля тегов \u003CTН\u003E или \u003CTD\u003E предусмотрены следующие атрибуты: \u003Cbr\u003E\u003Cp\u003EALIGN – устанавливает горизонтальное выравнивание текста в ячейке. Может принимать значение LEFT, CENTER и RIGHT;\u003Cbr\u003EVALIGN – устанавливает вертикальное выравнивание текста в ячейке. Допустимые значения: TOP, CENTER (это значение принимается по умолчанию), BOTTOM; \u003Cbr\u003EWIDTH – определяет ширину ячейки в пикселах;\u003Cbr\u003EHEIGHT – определяет высоту ячейки в пикселах; \u003Cbr\u003ENOWRAP – присутствие этого атрибута показывает, что текст должен размещаться в одну строку; \u003Cbr\u003EBGCOLOR – устанавливает цвет фона ячейки \u003Cbr\u003EBACKGROUND – заполняет фон ячейки изображением. Значением атрибута является URL нужного файла. \u003Cbr\u003E","\u003Cp\u003EИспользование изображений \u003Cbr\u003E\u003Cp\u003EЧтобы использовать рисунок в качестве фона, применяют атрибут BACKGROUND. Его можно указывать в теге \u003CBODY\u003E и табличных тегах \u003CTABLE\u003E, \u003CTR\u003E, \u003CTH\u003E, \u003CTD\u003E \u003Cbr\u003EЕсли размер рисунка больше размера площади, которую следует закрыть фоном, то берется левая верхняя часть изображения, если меньше – рисунок повторяется, пока вся отведенная под фон площадь не будет закрыта, т. е. заданное изображение используется как кафельная плитка. \u003Cbr\u003E","\u003Cp\u003EРисунок в качестве самостоятельного объекта (логотип фирмы, фотография и т. п.) вставляется тегом \u003CIMG\u003E (IMaGe – изображение). Обязательный атрибут – SRC (SouRCe – источник). Значением этого атрибута является URL файла с изображением. \u003Cbr\u003EПримеры. \u003Cbr\u003E\u003CIMG SRC=\"picture.gif\"\u003E – рисунок picture.gif находится в том же каталоге, что и текущий документ;\u003Cbr\u003E\u003CIMG SRC=\"images\u002Fpicture.gif\"\u003E – из текущего каталога перейти в подкаталог images и взять файл picture.gif оттуда;\u003Cbr\u003E\u003CIMG SRC=\"http:\u002F\u002Fwww.fortunecity.com\u002Fbusiness\u002Fartics\u002Fpractic\u002Fmyphoto.gif\"\u003E – указание полного пути к файлу. Обычно применяется, если рисунок находится на другом сервере или используется файл с другого сайта.\u003Cbr\u003E","\u003Cp\u003EОстальные атрибуты тега \u003CIMG\u003E \u003Cbr\u003E\u003Cp\u003EBORDER=n – рамка вокруг рисунка, где n – ее толщина в пикселах. При n = 0 (значение по умолчанию) рамка не рисуется; \u003Cbr\u003EWIDTH=n – задается ширина изображения в пикселах или в процентах от ширины экрана броузера (тогда после n следует знак %). По умолчанию – естественная ширина;\u003Cbr\u003EHEIGHT=n – высота изображения в пикселах или в процентах от высоты экрана. По умолчанию – естественная высота;\u003Cbr\u003EHSPACE=n – отступ слева и справа от картинки шириной в n пикселов (т.е. свободное пространство между рисунком и текстом или чем-то иным). По умолчанию 0;\u003Cbr\u003EVSPACE=n – вертикальный отступ от картинки в пикселах. По умолчанию 0;\u003Cbr\u003E","\u003Cp\u003EТеги гиперссылок \u003Cbr\u003E\u003Cp\u003EСсылки создаются с помощью контейнера \u003CA \u003E…\u003C\u002FA\u003E (Add – добавлять). Обязательный атрибут – HREF (Hiper REFerence – гиперссылка). При минимальном наборе атрибутов структура ссылки выглядит так:\u003Cbr\u003E\u003CA HREF=\"URL вызываемого файла\"\u003E якорь ссылки \u003C\u002FA\u003E\u003Cbr\u003EПримеры.\u003Cbr\u003E \u003CA HREF=\"filename.html\"\u003E нужный документ \u003C\u002FA\u003E – по двойному щелчку на тексте нужный документ обозреватель раскроет документ filename.html, находящийся в том же каталоге, что и текущий документ;\u003Cbr\u003E\u003CA HREF=\"http:\u002F\u002Fwww.fortunecity.com\u002Fbusiness\u002Ffax\u002F339\u002Findex.html\"\u003E нужный документ \u003C\u002FA\u003E – ссылка с указанием полного адреса файла на другом компьютере. По двойному щелчку на тексте нужный документ установится связь с нужным компьютером и раскроется документ index.html, находящийся там по адресу \u002Fbusiness\u002Ffax\u002F339\u002F.\u003Cbr\u003E","\u003Cp\u003EАтрибуты тега \u003CA\u003E: \u003Cbr\u003E\u003Cp\u003ETITLE =\"поясняющий текст\"– всплывающая подсказка с пояснением к ссылке; \u003Cbr\u003ETARGET=\"имя окна\" – указывает, в каком окне следует раскрывать вызванный документ \u003Cbr\u003E","\u003Cp\u003EПример\u003Cbr\u003E\u003Cp\u003EПишите письма \u003CA HREF=\"mailto:\u002F\[e-mail]\" TITLE=\"Ссылка на почтовый ящик Администратора сайта\"\u003E\r\nавтору \u003C\u002FA\u003E\u003Cbr\u003EВ окне браузера появится текст:\u003Cbr\u003EПишите письма автору\u003Cbr\u003EЕсли навести курсор на слово автору, то появится всплывающая подсказка Ссылка на почтовый ящик Администратора сайта. \u003Cbr\u003EПо двойному щелчку на слове автору будет запущена почтовая программа в режиме создания сообщений, и в поле Кому автоматически будет введен адрес [e-mail]\u003Cbr\u003E","\u003Cp\u003EВнутренние ссылки\u003Cbr\u003E\u003Cp\u003EСсылки можно делать не только на внешнюю информацию, но и на внутренние места документа. Это облегчает просмотр больших документов. \u003Cbr\u003EПример:\u003Cbr\u003EПункт Содержания со ссылкой на Главу 1 должен выглядеть так:\u003Cbr\u003E\u003CLI\u003E\u003CA HREF=\"#Часть 1\"\u003E Часть1 Форматирование текста \u003C\u002FA\u003E\u003Cbr\u003E","\u003Cp\u003EРазделение экрана на кадры \u003Cbr\u003E\u003Cp\u003EКадры (другое название фреймы) – это области экрана, в каждую из которых можно поместить отдельный HTML-документ. \u003Cbr\u003EРазделение окна на кадры выполняется с помощью HTML-файла, в котором контейнер \u003CBODY\u003E…\u003C\u002FBODY\u003E заменен на \u003CFRAMESET\u003E… \u003C\u002FFRAMESET\u003E. \u003Cbr\u003E Атрибуты этого тега определяют, как разбивается экран.\u003Cbr\u003E","\u003Cp\u003EПримеры:\u003Cbr\u003E\u003CFRAMESET COLS=\"25%,40%,35%\"\u003E – экран разбивается на три колонки, ширина которых задана в процентах от ширины окна броузера;\u003Cbr\u003E\u003CFRAMESET ROWS=\"10%,90%\"\u003E – экран разбивается на две строки, высота которых указана в процентах от высоты окна броузера. \u003Cbr\u003E\u003CFRAMESET COLS=\"100,*,35%\"\u003E \u003Cbr\u003E\u003CFRAMESET COLS=\"*,2*,*\"\u003E \u003Cbr\u003EЗаполнением кадров управляют теги \u003CFRAME\u003E. Обязательный атрибут – SRC=\"URL документа, загружаемого в кадр\". \u003Cbr\u003E","\u003Cp\u003EПример\u003Cbr\u003E\u003Cp\u003E \u003CHTML\u003E\u003Cbr\u003E\u003CHEAD\u003E\u003Cbr\u003E \u003CTITLE\u003E Разбивка экрана на кадры \u003C\u002FTITLE\u003E\u003Cbr\u003E\u003CHEAD\u003E\u003Cbr\u003E\u003CFRAMESET COLS=\"33%,67%\"\u003E\u003Cbr\u003E \t \u003CFRAMESET ROWS=\"75,*\"\u003E \u003Cbr\u003E \u003CFRAME NAME=\"флаг\" SRC=\"флаг.jpg\"\u003E\u003Cbr\u003E \t\t \u003CFRAME NAME=\"герб\" SRC=\"герб.jpg\"\u003E\u003Cbr\u003E \t\t \u003Cbr\u003E \t \u003C\u002FFRAMESET\u003E\u003Cbr\u003E \t \u003CFRAME NAME=\"гимн\" SRC=\"гимн.png\"\u003E\u003Cbr\u003E \u003C\u002FFRAMESET\u003E\u003Cbr\u003E \u003C\u002FHTML\u003E\u003Cbr\u003E",a],href:"\u002Finformatika\u002Fosnovy-html-3",href_category:"\u002Finformatika",date:1633767863,related:[{id:192375,name:"Нехимические зависимости",href:"\u002Finformatika\u002Fnehimicheskie-zavisimosti",jpg:"jpg\u002F192375"},{id:229066,name:"Мастер-класс по написанию литературного обзора",href:"\u002Finformatika\u002Fmaster-klass-po-napisaniyu-literaturnogo-obzora",jpg:"jpg\u002F229066"},{id:280860,name:"Понятие как форма мышления",href:"\u002Finformatika\u002Fponyatie-kak-forma-myshleniya-5",jpg:"jpg\u002F280860"},{id:348325,name:"Конструкции языка PHP",href:"\u002Finformatika\u002Fkonstruktsii-yazyka-php",jpg:"jpg\u002F348325"},{id:581640,name:"Технологии мультимедиа",href:"\u002Finformatika\u002Ftehnologii-multimedia-3",jpg:"jpg\u002F581640"},{id:527700,name:"Системы автоматизированного проектирования",href:"\u002Finformatika\u002Fsistemy-avtomatizirovannogo-proektirovaniya-5",jpg:"jpg\u002F527700"},{id:416955,name:"Создание веб-сайта. Практическая работа №10",href:"\u002Finformatika\u002Fsozdanie-veb-sayta-prakticheskaya-rabota-n10",jpg:"jpg\u002F416955"},{id:193722,name:"Маршрутизаторы, функция VPN",href:"\u002Finformatika\u002Fmarshrutizatory-funktsiya-vpn",jpg:"jpg\u002F193722"},{id:196947,name:"Коммуникативная природа информационного общества. Понятие коммуникации",href:"\u002Finformatika\u002Fkommunikativnaya-priroda-informatsionnogo-obshchestva-ponyatie-kommunikatsii",jpg:"jpg\u002F196947"},{id:211716,name:"Мобильный агент",href:"\u002Finformatika\u002Fmobilnyy-agent",jpg:"jpg\u002F211716"},{id:277039,name:"Интеллектуальные события. Интеллектуальный суверенитет России",href:"\u002Finformatika\u002Fintellektualnye-sobytiya-intellektualnyy-suverenitet-rossii",jpg:"jpg\u002F277039"},{id:224314,name:"Технология клиент-сервер",href:"\u002Finformatika\u002Ftehnologiya-klient-server",jpg:"jpg\u002F224314"},{id:396756,name:"Типовые клиенты доступа к базе данных на основе различных технологий",href:"\u002Finformatika\u002Ftipovye-klienty-dostupa-k-baze-dannyh",jpg:"jpg\u002F396756"},{id:18842,name:"Використання інтернет-ресурсів для спільної роботи. Рівні та способи доступу до ресурсів",href:"\u002Finformatika\u002Fvikoristannya-nternet-resursv-dlya-splno-roboti",jpg:"jpg\u002F18842"},{id:207545,name:"Списки и таблицы в HTML",href:"\u002Finformatika\u002Fspiski-i-tablitsy-v-html",jpg:"jpg\u002F207545"},{id:206877,name:"Своя игра. Викторина. Шаблон",href:"\u002Finformatika\u002Fsvoya-igra-viktorina-shablon-1",jpg:"jpg\u002F206877"},{id:579277,name:"Уровень вершины дерева (3 кл.)",href:"\u002Finformatika\u002Furoven-vershiny-dereva-3-kl",jpg:"jpg\u002F579277"},{id:220714,name:"Информационные технологии в образовании",href:"\u002Finformatika\u002Finformatsionnye-tehnologii-v-obrazovanii-2",jpg:"jpg\u002F220714"},{id:405258,name:"Электронная библиотека Национальной библиотеки Республики Саха (Якутия)",href:"\u002Finformatika\u002Felektronnaya-biblioteka-natsionalnoy-biblioteki-respubliki-saha",jpg:"jpg\u002F405258"},{id:530941,name:"Презентация урок №20_Редактирование и устройства ввода графического изображения_5класс",href:"\u002Finformatika\u002Fprezentatsiya-urok-n20redaktirovanie-i-ustroystva-vvoda",jpg:"jpg\u002F530941"},{id:305363,name:"Рабочий стол в реальном и виртуальном мире",href:"\u002Finformatika\u002Frabochiy-stol-v-realnom-i-virtualnom",jpg:"jpg\u002F305363"},{id:267501,name:"Access 2010",href:"\u002Finformatika\u002Faccess-2010",jpg:"jpg\u002F267501"},{id:438735,name:"Программирование на языке Python. Простейшие программы",href:"\u002Finformatika\u002Fprogrammirovanie-na-yazyke-python-prosteyshie-programmy",jpg:"jpg\u002F438735"},{id:441027,name:"Беспроводная связь",href:"\u002Finformatika\u002Fbesprovodnaya-svyaz",jpg:"jpg\u002F441027"},{id:254605,name:"Программирование на языке высокого уровня",href:"\u002Finformatika\u002Fprogrammirovanie-na-yazyke-vysokogo-urovnya-4",jpg:"jpg\u002F254605"},{id:1640,name:"Реляциялық деректер қоры және SQL тілі",href:"\u002Finformatika\u002Frelyatsiyaly-derekter-ory-zhne-sql-tl",jpg:"jpg\u002F1640"},{id:211942,name:"Java. (Лекция 4)",href:"\u002Finformatika\u002Fjava-lektsiya-4",jpg:"jpg\u002F211942"},{id:263370,name:"Электронные образовательные ресурсы нового поколения",href:"\u002Finformatika\u002Felektronnye-obrazovatelnye-resursy-novogo-pokoleniya-1",jpg:"jpg\u002F263370"}],navigation:{next:"\u002Finformatika\u002Fvidy-ip-adresov",next_name:"Виды IP адресов",prev:"\u002Farmiya\u002Fosoblivost-organzats-borotbi-z-bpla",prev_name:"Особливості організації боротьби з БпЛА"}}},categories:{result:[{id:H,ordering:b,name:"Без категории",pseudoname:"uncategorized"},{id:144,ordering:b,name:"Бизнес",pseudoname:"biznes"},{id:146,ordering:b,name:"Образование",pseudoname:"obrazovanie"},{id:149,ordering:b,name:"Финансы",pseudoname:"finansy"},{id:150,ordering:b,name:"Государство",pseudoname:"gosudarstvo"},{id:152,ordering:b,name:"Спорт",pseudoname:"sport"},{id:154,ordering:b,name:"Армия",pseudoname:"armiya"},{id:156,ordering:b,name:"Культурология",pseudoname:"kulturologiya"},{id:157,ordering:b,name:"Еда и кулинария",pseudoname:"eda-i-kulinariya"},{id:158,ordering:b,name:"Лингвистика",pseudoname:"lingvistika"},{id:163,ordering:b,name:"Черчение",pseudoname:"cherchenie"},{id:164,ordering:b,name:"Физкультура",pseudoname:"fizkultura"},{id:165,ordering:b,name:"ИЗО",pseudoname:"izo"},{id:166,ordering:b,name:"Психология",pseudoname:"psihologiya"},{id:116,ordering:H,name:"Английский язык",pseudoname:"angliyskiy-yazyk"},{id:108,ordering:2,name:"Астрономия",pseudoname:"astronomiya"},{id:104,ordering:3,name:"Алгебра",pseudoname:"algebra"},{id:106,ordering:4,name:"Биология",pseudoname:"biologiya"},{id:142,ordering:5,name:"География",pseudoname:"geografiya"},{id:141,ordering:6,name:"Геометрия",pseudoname:"geometria"},{id:123,ordering:7,name:"Детские презентации",pseudoname:"detskie-prezentatsii"},{id:107,ordering:8,name:G,pseudoname:"informatika"},{id:109,ordering:9,name:"История",pseudoname:"istoriya"},{id:139,ordering:10,name:"Литература",pseudoname:"literatura"},{id:119,ordering:11,name:"Маркетинг",pseudoname:"marketing"},{id:114,ordering:12,name:"Математика",pseudoname:"matematika"},{id:138,ordering:h,name:"Медицина",pseudoname:"medetsina"},{id:118,ordering:14,name:"Менеджмент",pseudoname:"menedzhment"},{id:137,ordering:15,name:"Музыка",pseudoname:"muzyka"},{id:136,ordering:16,name:"МХК",pseudoname:"mhk"},{id:130,ordering:17,name:"Немецкий язык",pseudoname:"nemetskiy-yazyk"},{id:105,ordering:18,name:"ОБЖ",pseudoname:"obzh"},{id:133,ordering:19,name:"Обществознание ",pseudoname:"obshchestvoznanie"},{id:132,ordering:20,name:"Окружающий мир ",pseudoname:"okruzhayushchiy-mir"},{id:131,ordering:21,name:"Педагогика ",pseudoname:"pedagogika"},{id:129,ordering:22,name:"Русский язык",pseudoname:"russkiy-yazyk"},{id:128,ordering:24,name:"Технология",pseudoname:"tehnologiya"},{id:127,ordering:25,name:"Физика",pseudoname:"fizika"},{id:126,ordering:26,name:"Философия",pseudoname:"filosofiya"},{id:125,ordering:27,name:"Химия",pseudoname:"himiya"},{id:124,ordering:29,name:"Экология",pseudoname:"ekologiya"},{id:121,ordering:30,name:"Экономика",pseudoname:"ekonomika"},{id:120,ordering:31,name:"Юриспруденция",pseudoname:"yurisprudentsiya"}]}},state:{},_errors:{},serverRendered:e,config:{public:{SITE_NAME:I,SITE_HOST:"mypreza.com",SITE_LANG:J,API_BASE_URL:"https:\u002F\u002Fmypreza.com\u002Fapi\u002F",pwaManifest:{name:I,short_name:a,description:a,lang:J,start_url:"\u002F?standalone=true",display:"standalone",background_color:j,theme_color:"#000000",icons:[{src:"\u002F_nuxt\u002Ficons\u002F64x64.f2a6e93d.png",type:d,sizes:K,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F64x64.maskable.f2a6e93d.png",type:d,sizes:K,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F120x120.f2a6e93d.png",type:d,sizes:L,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F120x120.maskable.f2a6e93d.png",type:d,sizes:L,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F144x144.f2a6e93d.png",type:d,sizes:M,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F144x144.maskable.f2a6e93d.png",type:d,sizes:M,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F152x152.f2a6e93d.png",type:d,sizes:N,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F152x152.maskable.f2a6e93d.png",type:d,sizes:N,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F192x192.f2a6e93d.png",type:d,sizes:O,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F192x192.maskable.f2a6e93d.png",type:d,sizes:O,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F384x384.f2a6e93d.png",type:d,sizes:P,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F384x384.maskable.f2a6e93d.png",type:d,sizes:P,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F512x512.f2a6e93d.png",type:d,sizes:Q,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F512x512.maskable.f2a6e93d.png",type:d,sizes:Q,purpose:g}]},yandexMetrika:{id:"85004146",metrikaUrl:"https:\u002F\u002Fmc.yandex.ru\u002Fmetrika\u002Ftag.js",accurateTrackBounce:e,childIframe:c,clickmap:c,defer:c,useRuntimeConfig:e,trackHash:c,trackLinks:e,type:b,webvisor:c,triggerEvent:c,consoleLog:e,partytown:c,isDev:c}},app:{baseURL:"\u002F",buildAssetsDir:"\u002F_nuxt\u002F",cdnURL:a}},pinia:{app:{meta:{h1:l,main_text:a,main_title:m,main_description:n,main_keywords:o,main_image:a},app:{logo_image:p,logo_image_width:q,logo_image_height:r,logo_text:a,image_width_full:s,image_width_min:t,recaptcha_key:u,yandex_search:v,ya_context:c,banner_1:a,banner_2:a,banner_3:a,banner_4:a,banner_5:a,banner_6:a,banner_7:a,banner_8:a,banner_9:a,banner_10:a,email:w,footer_before:a,footer:a,dark_theme:c,strategy:{image_alt_words:h,item_slide_header:x,item_images:y,item_images_tag:z,item_words_h3:c,item_words_tag:A,item_words_1:h,routing:B,item_slide_skipping:C,item_download_timeout:D,item_slider_width:E,item_show_pdf:e,item_show_contents:e,item_show_filename:e},colors:{header_text:j,header_bg:i,accent:i}},social:F,token:a}}}}("",0,false,"image\u002Fpng",true,"any","maskable",13,"#d53032","#ffffff","Основы HTML","Учебные презентации","Презентации в PowerPoint на разные темы","Презентации, проекты, доклады в PowerPoint на разные темы для учебы","Презентация, на тему, урок, класс, PowerPoint, скачати презентацію, фон, шаблон, доклад, проект.","images\u002Fdata\u002Flogo.png",185,40,720,480,"6LeioWIpAAAAAGqMN4KqMVIkekcMW7fBKHjXCd-a","2503267","[e-mail]","h3a","text","none","h3","category","both",80,800,"\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","Информатика",1,"Mypreza","ru","64x64","120x120","144x144","152x152","192x192","384x384","512x512")) по умолчанию ширина таблицы определяется содержимым ячеек;
ALIGN – определяет расположение таблицы в документе. По умолчанию таблица прижата к левому краю страницы. Допустимые значения атрибута: LEFT , CENTER и RIGHT;
BORDER – устанавливает толщину рамки в пикселах. По умолчанию – 0 (таблица рисуется без рамки);
BORDERCOLOR – устанавливает цвет рамки, по умолчанию черный. Цвет можно задавать английским словом или шестнадцатеричным числом;
CELLSPACING – определяет расстояние между рамками ячеек таблицы в пикселах;
CELLPADDING – определяет промежуток в пикселах между рамкой ячейки и текстом внутри нее;
BGCOLOR – устанавливает цвет фона для всей таблицы. По умолчанию белый. Цвет можно задавать английским словом или шестнадцатеричным числом
BACKGROUND – заполняет фон таблицы изображением. Значением атрибута является URL нужного файла.

Тег

Для тегов
или

Использование изображений
Чтобы использовать рисунок в качестве фона, применяют атрибут BACKGROUND. Его можно указывать в теге и табличных тегах , ,
,
Если размер рисунка больше размера площади, которую следует закрыть фоном, то берется левая верхняя часть изображения, если меньше – рисунок повторяется, пока вся отведенная под фон площадь не будет закрыта, т. е. заданное изображение используется как кафельная плитка.
Слайд 32
Рисунок в качестве самостоятельного объекта (логотип фирмы, фотография и т. п.) вставляется тегом
(IMaGe – изображение). Обязательный атрибут – SRC (SouRCe – источник). Значением этого атрибута является URL файла с изображением.
Примеры.
– рисунок picture.gif находится в том же каталоге, что и текущий документ;
– из текущего каталога перейти в подкаталог images и взять файл picture.gif оттуда;
– указание полного пути к файлу. Обычно применяется, если рисунок находится на другом сервере или используется файл с другого сайта.
Слайд 33
Остальные атрибуты тега
BORDER=n – рамка вокруг рисунка, где n – ее
толщина в пикселах. При n = 0 (значение по умолчанию) рамка не рисуется;
WIDTH=n – задается ширина изображения в пикселах или в процентах от ширины экрана броузера (тогда после n следует знак %). По умолчанию – естественная ширина;
HEIGHT=n – высота изображения в пикселах или в процентах от высоты экрана. По умолчанию – естественная высота;
HSPACE=n – отступ слева и справа от картинки шириной в n пикселов (т.е. свободное пространство между рисунком и текстом или чем-то иным). По умолчанию 0;
VSPACE=n – вертикальный отступ от картинки в пикселах. По умолчанию 0;
Слайд 34
Теги гиперссылок
Ссылки создаются с помощью контейнера
…
(Add – добавлять). Обязательный
атрибут – HREF (Hiper REFerence – гиперссылка). При минимальном наборе атрибутов структура ссылки выглядит так:
якорь ссылки
Примеры.
нужный документ
– по двойному щелчку на тексте нужный документ обозреватель раскроет документ filename.html, находящийся в том же каталоге, что и текущий документ;
нужный документ
– ссылка с указанием полного адреса файла на другом компьютере. По двойному щелчку на тексте нужный документ установится связь с нужным компьютером и раскроется документ index.html, находящийся там по адресу /business/fax/339/.
Слайд 35
Атрибуты тега
:
TITLE ="поясняющий текст"– всплывающая подсказка с пояснением к ссылке;
TARGET="имя
окна" – указывает, в каком окне следует раскрывать вызванный документ
Слайд 36
Пример
Пишите письма
автору
В окне браузера
появится текст:
Пишите письма автору
Если навести курсор на слово автору, то появится всплывающая подсказка Ссылка на почтовый ящик Администратора сайта.
По двойному щелчку на слове автору будет запущена почтовая программа в режиме создания сообщений, и в поле Кому автоматически будет введен адрес [e-mail]
Слайд 37
Внутренние ссылки
Ссылки можно делать не только на внешнюю информацию, но и на внутренние
места документа. Это облегчает просмотр больших документов.
Пример:
Пункт Содержания со ссылкой на Главу 1 должен выглядеть так:
Часть1 Форматирование текста
Слайд 38
Разделение экрана на кадры
Кадры (другое название фреймы) – это области экрана, в
каждую из которых можно поместить отдельный HTML-документ.
Разделение окна на кадры выполняется с помощью HTML-файла, в котором контейнер … заменен на … .
Атрибуты этого тега определяют, как разбивается экран.
Слайд 39
Примеры:
– экран разбивается на три колонки, ширина которых задана в процентах
от ширины окна броузера;
– экран разбивается на две строки, высота которых указана в процентах от высоты окна броузера.
Заполнением кадров управляют теги . Обязательный атрибут – SRC="URL документа, загружаемого в кадр".
Слайд 40
Пример
Разбивка экрана на кадры
NAME="флаг" SRC="флаг.jpg">
Имя файла: Основы-HTML.pptx
Количество просмотров: 65
Количество скачиваний: 0
Скачать
- Предыдущая
Особливості організації боротьби з БпЛА
Следующая -
Виды IP адресов
Похожие презентации
Нехимические зависимости
Мастер-класс по написанию литературного обзора
Понятие как форма мышления
Конструкции языка PHP
Технологии мультимедиа
Системы автоматизированного проектирования
Создание веб-сайта. Практическая работа №10
Маршрутизаторы, функция VPN
Коммуникативная природа информационного общества. Понятие коммуникации
Мобильный агент
Интеллектуальные события. Интеллектуальный суверенитет России
Технология клиент-сервер
Типовые клиенты доступа к базе данных на основе различных технологий
Використання інтернет-ресурсів для спільної роботи. Рівні та способи доступу до ресурсів
Списки и таблицы в HTML
Своя игра. Викторина. Шаблон
Уровень вершины дерева (3 кл.)
Информационные технологии в образовании
Электронная библиотека Национальной библиотеки Республики Саха (Якутия)
Презентация урок №20_Редактирование и устройства ввода графического изображения_5класс
Рабочий стол в реальном и виртуальном мире
Access 2010
Программирование на языке Python. Простейшие программы
Беспроводная связь
Программирование на языке высокого уровня
Реляциялық деректер қоры және SQL тілі
Java. (Лекция 4)
Электронные образовательные ресурсы нового поколения
Обратная связь
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){return {data:{meta:{result:{meta:{h1:l,main_text:a,main_title:m,main_description:n,main_keywords:o,main_image:a},app:{logo_image:p,logo_image_width:q,logo_image_height:r,logo_text:a,image_width_full:s,image_width_min:t,recaptcha_key:u,yandex_search:v,ya_context:c,banner_1:a,banner_2:a,banner_3:a,banner_4:a,banner_5:a,banner_6:a,banner_7:a,banner_8:a,banner_9:a,banner_10:a,email:w,footer_before:a,footer:a,dark_theme:c,strategy:{image_alt_words:h,item_slide_header:x,item_images:y,item_images_tag:z,item_words_h3:c,item_words_tag:A,item_words_1:h,routing:B,item_slide_skipping:C,item_download_timeout:D,item_slider_width:E,item_show_pdf:e,item_show_contents:e,item_show_filename:e},colors:{header_text:j,header_bg:i,accent:i}},social:F}},item:{result:{id:201527,name:k,category:G,count:41,jpg:"jpg\u002F201527",hits:65,download:b,h1:"Основы HTML презентация",meta:{h1:k,title:k,description:"Основы HTML презентация на тему, доклад, Информатика",keywords:"Основы HTML, презентация, доклад, проект, скачать, на тему, PowerPoint, урок, класс, школа, Информатика",download_link:a},text:"Вы можете изучить и скачать доклад-презентацию на тему Презентация на тему Основы HTML из раздела Информатика. Презентация на заданную тему содержит 41 слайдов. Для просмотра воспользуйтесь проигрывателем, если материал оказался полезным для Вас - поделитесь им с друзьями с помощью социальных кнопок и добавьте наш сайт презентаций в закладки!",seo_text:"\u003Cp\u003EВ языке HTML установлены следующие правила:\u003Cbr\u003E\u003Cp\u003Eвесь документ набирается только текстовыми символами (их коды понятны всем редакторам), т. е. его можно набрать в любом текстовом редакторе (например, \"Блокнот\", \"WordPad\");\u003Cbr\u003Eсимволы и конструкции, ко",file:"Основы-HTML.pptx",texts:["\u003Cp\u003EЛекция\u003Cbr\u003E\u003Cp\u003EОСНОВЫ HTML\u003Cbr\u003E","\u003Cp\u003EВ языке HTML установлены следующие правила:\u003Cbr\u003E\u003Cp\u003Eвесь документ набирается только текстовыми символами (их коды понятны всем редакторам), т. е. его можно набрать в любом текстовом редакторе (например, \"Блокнот\", \"WordPad\");\u003Cbr\u003Eсимволы и конструкции, которые непонятны браузеру, игнорируются;\u003Cbr\u003Eв текст документа можно добавлять разнообразные команды, которые указывают, как следует изображать на экране тот или иной фрагмент текста, или обеспечивают спецэффекты. Эти команды называют тегами. Они так же, как и документ, набираются текстовыми символами, но отделяются от него угловыми скобками: \u003C \u003E;\u003Cbr\u003Eфайлы c HTML-кодом должны помечаться расширением .html или .htm \u003Cbr\u003E","\u003Cp\u003EСтруктура тегов \u003Cbr\u003E\u003Cp\u003EКаждый тег обязательно содержит пару угловых скобок \u003C \u003E, между которыми находится ключевое слово, обозначающее основную функцию тега. \u003Cbr\u003EНапример, ключевое слово HR в теге \u003CHR\u003E означает, что тег вставляет в документ серую горизонтальную линию (Horizontal Row) по всей ширине страницы и толщиной в один пиксел.\u003Cbr\u003EДействие тега детализируется с помощью атрибутов. \u003Cbr\u003EНапример, применительно к тегу \u003CHR\u003E можно уточнить, какой длины, толщины и цвета должна быть линия. \u003Cbr\u003E","\u003Cp\u003EАтрибуты размещают после ключевого слова и перечисляют в произвольном порядке через пробел. \u003Cbr\u003EПосле каждого атрибута ставят знак = и нужное значение. \u003Cbr\u003EНапример, тег \u003CHR WIDTH=50% SIZE=4\u003E означает, что в документ следует вставить горизонтальную линию, которая должна доходить только до середины строки и иметь ширину не один, а четыре пиксела. \u003Cbr\u003E","\u003Cp\u003EМногие теги являются парными. Открывающий тег включает какое-нибудь действие, закрывающий прекращает его. \u003Cbr\u003EВ этом случае ключевое слово у обоих тегов одинаковое, но в открывающем теге дополнительно перечисляются все необходимые атрибуты, а в закрывающем атрибутов нет, и перед ключевым словом ставится знак \u002F. \u003Cbr\u003EПарные теги называются контейнерами. \u003Cbr\u003EНапример, контейнер \u003Cbr\u003E\u003CB\u003EЯ изучаю язык HTML\u003C\u002FB\u003E \u003Cbr\u003Eозначает, что текст Я изучаю язык HTML следует изобразить жирным шрифтом, а дальнейшие символы – так, как до него.\u003Cbr\u003E","\u003Cp\u003EСтруктура документа HTML \u003Cbr\u003E\u003Cp\u003EКаждый HTML-документ состоит из трех главных частей:\u003Cbr\u003EОбъявление HTML-кода – контейнер \u003CHTML\u003E …\u003C\u002FHTML\u003E\u003Cbr\u003EЗаголовок документа – контейнер \u003CHEAD\u003E … \u003C\u002FHEAD\u003E\u003Cbr\u003EТело документа – контейнер \u003CBODY\u003E … \u003C\u002FBODY\u003E\u003Cbr\u003E\u003CHTML\u003E\u003Cbr\u003E\u003CHEAD\u003E\u003Cbr\u003E\u003C\u002FHEAD\u003E\u003Cbr\u003E\u003CBODY\u003E\u003Cbr\u003E\u003C\u002FBODY\u003E\u003Cbr\u003E\u003C\u002FHTML\u003E\u003Cbr\u003E","\u003Cp\u003EВ заголовок помещаются теги, определяющие информацию о документе в целом. Наиболее употребительный из них – контейнер \u003CTITLE\u003E:\u003Cbr\u003E\u003CTITLE\u003E Краткая расшифровка содержания документа (не более 64 символов) \u003C\u002FTITLE\u003E. \u003Cbr\u003EПример.\u003Cbr\u003E\u003CTITLE\u003E Гостиницы для участников конференции \u003C\u002FTITLE\u003E\u003Cbr\u003E","\u003Cp\u003EВ разделе «тело документа» размещается содержание документа, которое выдается в рабочее окно броузера. Атрибуты тега \u003CBODY\u003E задают следующие свойства:\u003Cbr\u003ETEXT – цвет текста там, где он не указан специальными средствами. По умолчанию черный.\u003Cbr\u003EBGCOLOR – цвет фона. По умолчанию белый.\u003Cbr\u003EBACKGROUND – фоновое изображение (аналогично рисунку на Рабочем столе). Значением является URL файла–изображения.\u003Cbr\u003ELINK,VLINK, ALINK – соответственно цвета непосещенных, посещенных и активных в данный момент гиперссылок. \u003Cbr\u003EПримеры: \u003Cbr\u003E\u003CBODY TEXT=SILVER BGCOLOR=NAVY\u003E\u003Cbr\u003E\u003CBODY TEXT=SILVER BACKGROUND=\"море.jpg\"\u003E \u003Cbr\u003E","\u003Cp\u003EТеги форматирования шрифта \u003Cbr\u003E","\u003Cp\u003EАтрибуты тега \u003CFONT\u003E \u003Cbr\u003E\u003Cp\u003ESIZE – размер букв, возможные значения: 1, 2, 3,…, 7. По умолчанию 3;\u003Cbr\u003ECOLOR – цвет шрифта. Можно указывать шестнадцатеричными кодами (см. [2, 3, 5]) или английскими словами (см. табл. 5 Приложения). По умолчанию BLACK;\u003Cbr\u003EFACE – изменение типа шрифта, возможные значения: ARIAL, COURIER и т. д. По умолчанию VERDANA.\u003Cbr\u003E","\u003Cp\u003EТеги могут комбинироваться, но при этом надо следить, чтобы контейнеры имели вложенную структуру (контейнер, открытый позже, должен быть закрыт до того, как будет закрыт внешний). \u003Cbr\u003EНапример, для комбинации жирного и наклонного шрифтов можно использовать такой код: \u003Cbr\u003E\u003CB\u003E \u003CI\u003E пример \u003C\u002FI\u003E \u003C\u002FB\u003E \u003Cbr\u003EВ окне броузера мы получим: пример.\u003Cbr\u003E","\u003Cp\u003EПомимо перечисленных выше тегов существуют шесть контейнерных тегов, удобных для оформления заголовков: \u003CH1\u003E...\u003C\u002FH1\u003E, \u003CH2\u003E...\u003C\u002FH2\u003E, ... , \u003CH6\u003E…\u003C\u002FH6\u003E. \u003Cbr\u003EЗаголовки отличаются от текста и между собой толщиной и высотой букв (в заголовке \u003CH1\u003E самые крупные символы, в \u003CH6\u003E – самые мелкие), а также увеличением интервала по вертикали между заголовком и прочей информацией. \u003Cbr\u003EАтрибут ALIGN управляет выравниванием заголовков по горизонтали. По умолчанию он принимает значение LEFT. Другие возможные значения: CENTER, RIGHT.\u003Cbr\u003E Пример:\u003Cbr\u003E\u003CH4 ALIGN=CENTER\u003E Лабораторная работа №1 \u003C\u002FH4\u003E \u003Cbr\u003EРезультат действия тега :\u003Cbr\u003EЛабораторная работа №1\u003Cbr\u003E","\u003Cp\u003EТеги выделения смысловых частей текста \u003Cbr\u003E\u003Cp\u003EАбзацы в тексте выделяются контейнером \u003CP\u003E…\u003C\u002FP\u003E. \u003Cbr\u003EАтрибут ALIGN задает выравнивание по горизонтали. По умолчанию он принимает значение LEFT. Другие возможные значения: CENTER, RIGHT. При просмотре браузером абзацы отделяются друг от друга пустой строкой. \u003Cbr\u003E Примеры:\u003Cbr\u003E\u003CP\u003E Этот абзац расположен слева \u003C\u002FP\u003E\u003Cbr\u003E\u003CP ALIGN=CENTER\u003E Этот абзац по центру \u003C\u002FP\u003E\u003Cbr\u003E\u003CP ALIGN=RIGHT\u003E А вот этот абзац справа \u003C\u002FP\u003E\u003Cbr\u003EЭтот абзац расположен слева\u003Cbr\u003EЭтот абзац по центру\u003Cbr\u003EА вот этот абзац справа\u003Cbr\u003E","\u003Cp\u003EЧтобы перейти на новую строку, не вставляя пустую строку в текст, применяется тег \u003CBR\u003E. Закрывающего тега у него нет.\u003Cbr\u003EИногда полезно разделять смысловые части документа горизонтальной чертой. Это делается с помощью одиночного тега \u003CHR\u003E. Его атрибуты: \u003Cbr\u003ESIZE – толщина линии в пикселах. По умолчанию 1 пиксел.\u003Cbr\u003EWIDTH – длина линии в пикселах или процентах от ширины экрана. По умолчанию 100%.\u003Cbr\u003EALIGN – выравнивание линии, возможные значения: LEFT, CENTER, RIGHT. По умолчанию LEFT.\u003Cbr\u003ECOLOR – цвет линии, возможные значения: см. табл. По умолчанию GRAY.\u003Cbr\u003ENOSHADE – линия рисуется без тени. По умолчанию тень есть. \u003Cbr\u003E","\u003Cp\u003EПример. Код, в котором использованы теги \u003CBR\u003E и \u003CHR\u003E: \u003Cbr\u003E\u003CB\u003E Жизненная позиция \u003C\u002FB\u003E\u003Cbr\u003E\u003CHR NOSHADE WIDTH=250\u003E\u003Cbr\u003EХорошо на свете жить, \u003CBR\u003E\u003Cbr\u003EИнформатику учить! \u003CBR\u003E\u003Cbr\u003E\u003CHR SIZE=4 WIDTH=50% ALIGN=CENTER \u003Cbr\u003EВ окне браузера этот код изображается так:\u003Cbr\u003EЖизненная позиция\u003Cbr\u003EХорошо на свете жить,\u003Cbr\u003EИнформатику учить!\u003Cbr\u003E","\u003Cp\u003EКонтейнер \u003CBLOCKQUOTE\u003E … \u003C\u002FBLOCKQUOTE\u003E используют для того, чтобы добавить к выделенному им тексту поля со всех четырех сторон (сверху и снизу – по пустой строке, слева и справа – шириной в 5 знаков). \u003Cbr\u003E","\u003Cp\u003EЕще один полезный контейнер – \u003CPRE\u003E…\u003C\u002FPRE\u003E (PREformatted text – предварительно форматированный текст). \u003Cbr\u003EОбычно броузеры при выдаче текста на экран учитывают в цепочке идущих подряд пробелов только первый и игнорируют символы конца строки. Однако то, что находится в контейнере \u003CPRE\u003E, выводится в окне браузера точно так, как оно расположено в коде HTML-документа. \u003Cbr\u003E","\u003Cp\u003EПример.\u003Cbr\u003E\u003Cp\u003EТекст кода оформлен так:\u003Cbr\u003E\u003CPRE\u003E\u003Cbr\u003EЧтобы стихотворение красиво\u003Cbr\u003E смотрелось в окне браузера,\u003Cbr\u003E вовсе не обязательно использовать\u003Cbr\u003E тег &lt;BR&gt;!\u003Cbr\u003E\u003C\u002FPRE\u003E\u003Cbr\u003EВ окне браузера текст выглядит так:\u003Cbr\u003EЧтобы стихотворение красиво\u003Cbr\u003E смотрелось в окне браузера,\u003Cbr\u003E вовсе не обязательно использовать\u003Cbr\u003E тег \u003CBR\u003E!\u003Cbr\u003E","\u003Cp\u003EОформление списков \u003Cbr\u003E\u003Cp\u003EДля того, чтобы оформить фрагмент документа в виде маркированного списка, его помещают в контейнер \u003CUL\u003E… \u003C\u002FUL\u003E (Unordered List). \u003Cbr\u003EДля нумерованного – в контейнер \u003COL\u003E … \u003C\u002FOL\u003E (Оrdered List). \u003Cbr\u003EЗатем текст в контейнере разбивается на отдельные пункты списка тегами \u003CLI\u003E (LIst item – элемент списка). Закрывающий тег \u003C\u002FLI\u003E в конце каждого пункта ставить необязательно.\u003Cbr\u003E В маркированном списке все пункты автоматически помечаются одинаковыми маркерами, в нумерованном – элементы нумерует сам браузер. \u003Cbr\u003E","\u003Cp\u003EПримеры кода:\u003Cbr\u003E","\u003Cp\u003EВ теге \u003COL\u003E могут использоваться следующие атрибуты: \u003Cbr\u003E\u003Cp\u003ETYPE – определяет стиль оформления меток для элементов списка, подробнее ниже;\u003Cbr\u003ESTART – (только для нумерованного списка \u003COL\u003E) определяет значение первого элемента списка, задается всегда числом (по умолчанию 1). В зависимости от значения атрибута TYPE этому числу сопоставляются разные символы, подробнее ниже;\u003Cbr\u003EVALUE – (только для метки \u003CLI\u003E списка \u003COL\u003E) устанавливает номер текущего элемента списка. Как и в предыдущем случае, метка пункта может быть нечисловой, хотя значение атрибута – всегда число.\u003Cbr\u003E","\u003Cp\u003EДля нумерованного списка в зависимости от стиля нумерации значением атрибута TYPE могут быть: \u003Cbr\u003E1– арабские цифры (1,2,3,...)\u003Cbr\u003Ea– строчные буквы (a, b, c,…)\u003Cbr\u003EA– прописные буквы (A,B,C,...)\u003Cbr\u003Ei– римские цифры строчные (i,ii,iii,...)\u003Cbr\u003EI– римские цифры прописные (I,II,III,...)\u003Cbr\u003EПо умолчанию значения TYPE устанавливаются в зависимости от степени вложенности списка.\u003Cbr\u003EЧисло, указанное в атрибуте START, показывает порядковый номер элемента в ряду знаков, заданных в TYPE. С этого элемента следует начинать нумерацию пунктов списка.\u003Cbr\u003E","\u003Cp\u003EСоздание таблиц \u003Cbr\u003E\u003Cp\u003EПростая таблица\u003Cbr\u003E","\u003Cp\u003EЕсли таблица имеет сложную структуру и какие-то ячейки занимают несколько столбцов или строк, следует в тегах \u003CTH\u003E или \u003CTD\u003E добавить атрибуты соответственно COLSPAN=n или ROWSPAN=n, где n – количество столбцов (строк), на которые растянута данная ячейка. \u003Cbr\u003EНапример, COLSPAN=3 означает, что ячейка по ширине будет простираться на 3 колонки, ROWSPAN=2 означает, что ячейка по высоте занимает две строки таблицы. \u003Cbr\u003E","\u003Cp\u003EПример таблицы сложной структуры\u003Cbr\u003E\u003Cp\u003E\u003CTABLE ВORDER=1\u003E\u003Cbr\u003E \u003CTR\u003E\u003Cbr\u003E \u003CTH\u003E 1 \u003C\u002FTH\u003E \u003CTH COLSPAN=3\u003E 2 \u003C\u002FTH\u003E\u003Cbr\u003E \u003C\u002FTR\u003E\u003Cbr\u003E \u003CTR\u003E \u003Cbr\u003E \u003CTH ROWSPAN=2\u003E 3 \u003C\u002FTH\u003E \u003CTH\u003E 4 \u003C\u002FTH\u003E\u003Cbr\u003E \u003CTH\u003E 5 \u003C\u002FTH\u003E \u003CTH \u003E 6 \u003C\u002FTH\u003E\u003Cbr\u003E \u003C\u002FTR\u003E\u003Cbr\u003E \u003CTR\u003E\u003Cbr\u003E \u003CTH\u003E 7 \u003C\u002FTH\u003E \u003CTH COLSPAN=2\u003E 8 \u003C\u002FTH\u003E \u003Cbr\u003E \u003C\u002FTR\u003E\u003Cbr\u003E \u003CTR\u003E\u003Cbr\u003E \u003CTH\u003E 9 \u003C\u002FTH\u003E \u003CTH\u003E 10 \u003C\u002FTH\u003E \u003CTH\u003E 11 \u003C\u002FTH\u003E\u003Cbr\u003E \u003CTH\u003E 12 \u003C\u002FTH\u003E\u003Cbr\u003E \u003C\u002FTR\u003E\u003Cbr\u003E\u003C\u002FTABLE\u003E \u003Cbr\u003E","\u003Cp\u003EТаблица создается по строкам. Для каждой строки создается контейнер \u003CTR\u003E…\u003C\u002FTR\u003E, определяющий, какие ячейки и информация должны находиться в этой строке. \u003Cbr\u003EАтрибут ALIGN со значениями LEFT, CENTER или RIGHT задает горизонтальное выравнивание во всех ячейках строки. \u003Cbr\u003EАтрибут VALIGN со значениями TOP, MIDDLE или BOTTOM – вертикальное выравнивание (по умолчанию MIDDLE – по центру).\u003Cbr\u003E","\u003Cp\u003EДля оформления ячеек используются два вида контейнеров: \u003CTH\u003E…\u003C\u002FTH\u003E (Table Head) и \u003CTD\u003E…\u003C\u002FTD\u003E (Table Data). \u003Cbr\u003EПервый свою информацию выравнивает по центру и изображает жирным шрифтом, второй выравнивает по левому краю и использует обычный шрифт.\u003Cbr\u003E Обычно \u003CTH\u003E…\u003C\u002FTH\u003E используют для ячеек с заголовками строк или столбцов, а \u003CTD\u003E…\u003C\u002FTD\u003E – для ячеек с данными таблицы. \u003Cbr\u003EМожно также оставить ячейку пустой, но, чтобы она была отображена на экране, следует внести в нее &-последовательность &nbsp; \u003Cbr\u003E","\u003Cp\u003EОсновные атрибуты тега \u003CTABLE\u003E: \u003Cbr\u003E\u003Cp\u003EWIDTH – определяет ширину таблицы в пикселах или процентах, по умолчанию ширина таблицы определяется содержимым ячеек; \u003Cbr\u003EALIGN – определяет расположение таблицы в документе. По умолчанию таблица прижата к левому краю страницы. Допустимые значения атрибута: LEFT , CENTER и RIGHT; \u003Cbr\u003EBORDER – устанавливает толщину рамки в пикселах. По умолчанию – 0 (таблица рисуется без рамки); \u003Cbr\u003EBORDERCOLOR – устанавливает цвет рамки, по умолчанию черный. Цвет можно задавать английским словом или шестнадцатеричным числом; \u003Cbr\u003ECELLSPACING – определяет расстояние между рамками ячеек таблицы в пикселах; \u003Cbr\u003ECELLPADDING – определяет промежуток в пикселах между рамкой ячейки и текстом внутри нее; \u003Cbr\u003EBGCOLOR – устанавливает цвет фона для всей таблицы. По умолчанию белый. Цвет можно задавать английским словом или шестнадцатеричным числом \u003Cbr\u003E BACKGROUND – заполняет фон таблицы изображением. Значением атрибута является URL нужного файла. \u003Cbr\u003E","\u003Cp\u003EТег \u003CTR\u003E, открывающий строку таблицы, может иметь такие атрибуты: \u003Cbr\u003E\u003Cp\u003EALIGN – устанавливает горизонтальное выравнивание текста во всех ячейках строки. Может принимать значения LEFT (по умолчанию), CENTER и RIGHT; \u003Cbr\u003EVALIGN – устанавливает вертикальное выравнивание текста в ячейках строки. Допустимые значения: TOP (выравнивание по верхнему краю), MIDDLE (выравнивание по центру – это значение принимается по умолчанию), BOTTOM (по нижнему краю); \u003Cbr\u003EBGCOLOR – устанавливает цвет фона для строки \u003Cbr\u003E","\u003Cp\u003EДля тегов \u003CTН\u003E или \u003CTD\u003E предусмотрены следующие атрибуты: \u003Cbr\u003E\u003Cp\u003EALIGN – устанавливает горизонтальное выравнивание текста в ячейке. Может принимать значение LEFT, CENTER и RIGHT;\u003Cbr\u003EVALIGN – устанавливает вертикальное выравнивание текста в ячейке. Допустимые значения: TOP, CENTER (это значение принимается по умолчанию), BOTTOM; \u003Cbr\u003EWIDTH – определяет ширину ячейки в пикселах;\u003Cbr\u003EHEIGHT – определяет высоту ячейки в пикселах; \u003Cbr\u003ENOWRAP – присутствие этого атрибута показывает, что текст должен размещаться в одну строку; \u003Cbr\u003EBGCOLOR – устанавливает цвет фона ячейки \u003Cbr\u003EBACKGROUND – заполняет фон ячейки изображением. Значением атрибута является URL нужного файла. \u003Cbr\u003E","\u003Cp\u003EИспользование изображений \u003Cbr\u003E\u003Cp\u003EЧтобы использовать рисунок в качестве фона, применяют атрибут BACKGROUND. Его можно указывать в теге \u003CBODY\u003E и табличных тегах \u003CTABLE\u003E, \u003CTR\u003E, \u003CTH\u003E, \u003CTD\u003E \u003Cbr\u003EЕсли размер рисунка больше размера площади, которую следует закрыть фоном, то берется левая верхняя часть изображения, если меньше – рисунок повторяется, пока вся отведенная под фон площадь не будет закрыта, т. е. заданное изображение используется как кафельная плитка. \u003Cbr\u003E","\u003Cp\u003EРисунок в качестве самостоятельного объекта (логотип фирмы, фотография и т. п.) вставляется тегом \u003CIMG\u003E (IMaGe – изображение). Обязательный атрибут – SRC (SouRCe – источник). Значением этого атрибута является URL файла с изображением. \u003Cbr\u003EПримеры. \u003Cbr\u003E\u003CIMG SRC=\"picture.gif\"\u003E – рисунок picture.gif находится в том же каталоге, что и текущий документ;\u003Cbr\u003E\u003CIMG SRC=\"images\u002Fpicture.gif\"\u003E – из текущего каталога перейти в подкаталог images и взять файл picture.gif оттуда;\u003Cbr\u003E\u003CIMG SRC=\"http:\u002F\u002Fwww.fortunecity.com\u002Fbusiness\u002Fartics\u002Fpractic\u002Fmyphoto.gif\"\u003E – указание полного пути к файлу. Обычно применяется, если рисунок находится на другом сервере или используется файл с другого сайта.\u003Cbr\u003E","\u003Cp\u003EОстальные атрибуты тега \u003CIMG\u003E \u003Cbr\u003E\u003Cp\u003EBORDER=n – рамка вокруг рисунка, где n – ее толщина в пикселах. При n = 0 (значение по умолчанию) рамка не рисуется; \u003Cbr\u003EWIDTH=n – задается ширина изображения в пикселах или в процентах от ширины экрана броузера (тогда после n следует знак %). По умолчанию – естественная ширина;\u003Cbr\u003EHEIGHT=n – высота изображения в пикселах или в процентах от высоты экрана. По умолчанию – естественная высота;\u003Cbr\u003EHSPACE=n – отступ слева и справа от картинки шириной в n пикселов (т.е. свободное пространство между рисунком и текстом или чем-то иным). По умолчанию 0;\u003Cbr\u003EVSPACE=n – вертикальный отступ от картинки в пикселах. По умолчанию 0;\u003Cbr\u003E","\u003Cp\u003EТеги гиперссылок \u003Cbr\u003E\u003Cp\u003EСсылки создаются с помощью контейнера \u003CA \u003E…\u003C\u002FA\u003E (Add – добавлять). Обязательный атрибут – HREF (Hiper REFerence – гиперссылка). При минимальном наборе атрибутов структура ссылки выглядит так:\u003Cbr\u003E\u003CA HREF=\"URL вызываемого файла\"\u003E якорь ссылки \u003C\u002FA\u003E\u003Cbr\u003EПримеры.\u003Cbr\u003E \u003CA HREF=\"filename.html\"\u003E нужный документ \u003C\u002FA\u003E – по двойному щелчку на тексте нужный документ обозреватель раскроет документ filename.html, находящийся в том же каталоге, что и текущий документ;\u003Cbr\u003E\u003CA HREF=\"http:\u002F\u002Fwww.fortunecity.com\u002Fbusiness\u002Ffax\u002F339\u002Findex.html\"\u003E нужный документ \u003C\u002FA\u003E – ссылка с указанием полного адреса файла на другом компьютере. По двойному щелчку на тексте нужный документ установится связь с нужным компьютером и раскроется документ index.html, находящийся там по адресу \u002Fbusiness\u002Ffax\u002F339\u002F.\u003Cbr\u003E","\u003Cp\u003EАтрибуты тега \u003CA\u003E: \u003Cbr\u003E\u003Cp\u003ETITLE =\"поясняющий текст\"– всплывающая подсказка с пояснением к ссылке; \u003Cbr\u003ETARGET=\"имя окна\" – указывает, в каком окне следует раскрывать вызванный документ \u003Cbr\u003E","\u003Cp\u003EПример\u003Cbr\u003E\u003Cp\u003EПишите письма \u003CA HREF=\"mailto:\u002F\[e-mail]\" TITLE=\"Ссылка на почтовый ящик Администратора сайта\"\u003E\r\nавтору \u003C\u002FA\u003E\u003Cbr\u003EВ окне браузера появится текст:\u003Cbr\u003EПишите письма автору\u003Cbr\u003EЕсли навести курсор на слово автору, то появится всплывающая подсказка Ссылка на почтовый ящик Администратора сайта. \u003Cbr\u003EПо двойному щелчку на слове автору будет запущена почтовая программа в режиме создания сообщений, и в поле Кому автоматически будет введен адрес [e-mail]\u003Cbr\u003E","\u003Cp\u003EВнутренние ссылки\u003Cbr\u003E\u003Cp\u003EСсылки можно делать не только на внешнюю информацию, но и на внутренние места документа. Это облегчает просмотр больших документов. \u003Cbr\u003EПример:\u003Cbr\u003EПункт Содержания со ссылкой на Главу 1 должен выглядеть так:\u003Cbr\u003E\u003CLI\u003E\u003CA HREF=\"#Часть 1\"\u003E Часть1 Форматирование текста \u003C\u002FA\u003E\u003Cbr\u003E","\u003Cp\u003EРазделение экрана на кадры \u003Cbr\u003E\u003Cp\u003EКадры (другое название фреймы) – это области экрана, в каждую из которых можно поместить отдельный HTML-документ. \u003Cbr\u003EРазделение окна на кадры выполняется с помощью HTML-файла, в котором контейнер \u003CBODY\u003E…\u003C\u002FBODY\u003E заменен на \u003CFRAMESET\u003E… \u003C\u002FFRAMESET\u003E. \u003Cbr\u003E Атрибуты этого тега определяют, как разбивается экран.\u003Cbr\u003E","\u003Cp\u003EПримеры:\u003Cbr\u003E\u003CFRAMESET COLS=\"25%,40%,35%\"\u003E – экран разбивается на три колонки, ширина которых задана в процентах от ширины окна броузера;\u003Cbr\u003E\u003CFRAMESET ROWS=\"10%,90%\"\u003E – экран разбивается на две строки, высота которых указана в процентах от высоты окна броузера. \u003Cbr\u003E\u003CFRAMESET COLS=\"100,*,35%\"\u003E \u003Cbr\u003E\u003CFRAMESET COLS=\"*,2*,*\"\u003E \u003Cbr\u003EЗаполнением кадров управляют теги \u003CFRAME\u003E. Обязательный атрибут – SRC=\"URL документа, загружаемого в кадр\". \u003Cbr\u003E","\u003Cp\u003EПример\u003Cbr\u003E\u003Cp\u003E \u003CHTML\u003E\u003Cbr\u003E\u003CHEAD\u003E\u003Cbr\u003E \u003CTITLE\u003E Разбивка экрана на кадры \u003C\u002FTITLE\u003E\u003Cbr\u003E\u003CHEAD\u003E\u003Cbr\u003E\u003CFRAMESET COLS=\"33%,67%\"\u003E\u003Cbr\u003E \t \u003CFRAMESET ROWS=\"75,*\"\u003E \u003Cbr\u003E \u003CFRAME NAME=\"флаг\" SRC=\"флаг.jpg\"\u003E\u003Cbr\u003E \t\t \u003CFRAME NAME=\"герб\" SRC=\"герб.jpg\"\u003E\u003Cbr\u003E \t\t \u003Cbr\u003E \t \u003C\u002FFRAMESET\u003E\u003Cbr\u003E \t \u003CFRAME NAME=\"гимн\" SRC=\"гимн.png\"\u003E\u003Cbr\u003E \u003C\u002FFRAMESET\u003E\u003Cbr\u003E \u003C\u002FHTML\u003E\u003Cbr\u003E",a],href:"\u002Finformatika\u002Fosnovy-html-3",href_category:"\u002Finformatika",date:1633767863,related:[{id:192375,name:"Нехимические зависимости",href:"\u002Finformatika\u002Fnehimicheskie-zavisimosti",jpg:"jpg\u002F192375"},{id:229066,name:"Мастер-класс по написанию литературного обзора",href:"\u002Finformatika\u002Fmaster-klass-po-napisaniyu-literaturnogo-obzora",jpg:"jpg\u002F229066"},{id:280860,name:"Понятие как форма мышления",href:"\u002Finformatika\u002Fponyatie-kak-forma-myshleniya-5",jpg:"jpg\u002F280860"},{id:348325,name:"Конструкции языка PHP",href:"\u002Finformatika\u002Fkonstruktsii-yazyka-php",jpg:"jpg\u002F348325"},{id:581640,name:"Технологии мультимедиа",href:"\u002Finformatika\u002Ftehnologii-multimedia-3",jpg:"jpg\u002F581640"},{id:527700,name:"Системы автоматизированного проектирования",href:"\u002Finformatika\u002Fsistemy-avtomatizirovannogo-proektirovaniya-5",jpg:"jpg\u002F527700"},{id:416955,name:"Создание веб-сайта. Практическая работа №10",href:"\u002Finformatika\u002Fsozdanie-veb-sayta-prakticheskaya-rabota-n10",jpg:"jpg\u002F416955"},{id:193722,name:"Маршрутизаторы, функция VPN",href:"\u002Finformatika\u002Fmarshrutizatory-funktsiya-vpn",jpg:"jpg\u002F193722"},{id:196947,name:"Коммуникативная природа информационного общества. Понятие коммуникации",href:"\u002Finformatika\u002Fkommunikativnaya-priroda-informatsionnogo-obshchestva-ponyatie-kommunikatsii",jpg:"jpg\u002F196947"},{id:211716,name:"Мобильный агент",href:"\u002Finformatika\u002Fmobilnyy-agent",jpg:"jpg\u002F211716"},{id:277039,name:"Интеллектуальные события. Интеллектуальный суверенитет России",href:"\u002Finformatika\u002Fintellektualnye-sobytiya-intellektualnyy-suverenitet-rossii",jpg:"jpg\u002F277039"},{id:224314,name:"Технология клиент-сервер",href:"\u002Finformatika\u002Ftehnologiya-klient-server",jpg:"jpg\u002F224314"},{id:396756,name:"Типовые клиенты доступа к базе данных на основе различных технологий",href:"\u002Finformatika\u002Ftipovye-klienty-dostupa-k-baze-dannyh",jpg:"jpg\u002F396756"},{id:18842,name:"Використання інтернет-ресурсів для спільної роботи. Рівні та способи доступу до ресурсів",href:"\u002Finformatika\u002Fvikoristannya-nternet-resursv-dlya-splno-roboti",jpg:"jpg\u002F18842"},{id:207545,name:"Списки и таблицы в HTML",href:"\u002Finformatika\u002Fspiski-i-tablitsy-v-html",jpg:"jpg\u002F207545"},{id:206877,name:"Своя игра. Викторина. Шаблон",href:"\u002Finformatika\u002Fsvoya-igra-viktorina-shablon-1",jpg:"jpg\u002F206877"},{id:579277,name:"Уровень вершины дерева (3 кл.)",href:"\u002Finformatika\u002Furoven-vershiny-dereva-3-kl",jpg:"jpg\u002F579277"},{id:220714,name:"Информационные технологии в образовании",href:"\u002Finformatika\u002Finformatsionnye-tehnologii-v-obrazovanii-2",jpg:"jpg\u002F220714"},{id:405258,name:"Электронная библиотека Национальной библиотеки Республики Саха (Якутия)",href:"\u002Finformatika\u002Felektronnaya-biblioteka-natsionalnoy-biblioteki-respubliki-saha",jpg:"jpg\u002F405258"},{id:530941,name:"Презентация урок №20_Редактирование и устройства ввода графического изображения_5класс",href:"\u002Finformatika\u002Fprezentatsiya-urok-n20redaktirovanie-i-ustroystva-vvoda",jpg:"jpg\u002F530941"},{id:305363,name:"Рабочий стол в реальном и виртуальном мире",href:"\u002Finformatika\u002Frabochiy-stol-v-realnom-i-virtualnom",jpg:"jpg\u002F305363"},{id:267501,name:"Access 2010",href:"\u002Finformatika\u002Faccess-2010",jpg:"jpg\u002F267501"},{id:438735,name:"Программирование на языке Python. Простейшие программы",href:"\u002Finformatika\u002Fprogrammirovanie-na-yazyke-python-prosteyshie-programmy",jpg:"jpg\u002F438735"},{id:441027,name:"Беспроводная связь",href:"\u002Finformatika\u002Fbesprovodnaya-svyaz",jpg:"jpg\u002F441027"},{id:254605,name:"Программирование на языке высокого уровня",href:"\u002Finformatika\u002Fprogrammirovanie-na-yazyke-vysokogo-urovnya-4",jpg:"jpg\u002F254605"},{id:1640,name:"Реляциялық деректер қоры және SQL тілі",href:"\u002Finformatika\u002Frelyatsiyaly-derekter-ory-zhne-sql-tl",jpg:"jpg\u002F1640"},{id:211942,name:"Java. (Лекция 4)",href:"\u002Finformatika\u002Fjava-lektsiya-4",jpg:"jpg\u002F211942"},{id:263370,name:"Электронные образовательные ресурсы нового поколения",href:"\u002Finformatika\u002Felektronnye-obrazovatelnye-resursy-novogo-pokoleniya-1",jpg:"jpg\u002F263370"}],navigation:{next:"\u002Finformatika\u002Fvidy-ip-adresov",next_name:"Виды IP адресов",prev:"\u002Farmiya\u002Fosoblivost-organzats-borotbi-z-bpla",prev_name:"Особливості організації боротьби з БпЛА"}}},categories:{result:[{id:H,ordering:b,name:"Без категории",pseudoname:"uncategorized"},{id:144,ordering:b,name:"Бизнес",pseudoname:"biznes"},{id:146,ordering:b,name:"Образование",pseudoname:"obrazovanie"},{id:149,ordering:b,name:"Финансы",pseudoname:"finansy"},{id:150,ordering:b,name:"Государство",pseudoname:"gosudarstvo"},{id:152,ordering:b,name:"Спорт",pseudoname:"sport"},{id:154,ordering:b,name:"Армия",pseudoname:"armiya"},{id:156,ordering:b,name:"Культурология",pseudoname:"kulturologiya"},{id:157,ordering:b,name:"Еда и кулинария",pseudoname:"eda-i-kulinariya"},{id:158,ordering:b,name:"Лингвистика",pseudoname:"lingvistika"},{id:163,ordering:b,name:"Черчение",pseudoname:"cherchenie"},{id:164,ordering:b,name:"Физкультура",pseudoname:"fizkultura"},{id:165,ordering:b,name:"ИЗО",pseudoname:"izo"},{id:166,ordering:b,name:"Психология",pseudoname:"psihologiya"},{id:116,ordering:H,name:"Английский язык",pseudoname:"angliyskiy-yazyk"},{id:108,ordering:2,name:"Астрономия",pseudoname:"astronomiya"},{id:104,ordering:3,name:"Алгебра",pseudoname:"algebra"},{id:106,ordering:4,name:"Биология",pseudoname:"biologiya"},{id:142,ordering:5,name:"География",pseudoname:"geografiya"},{id:141,ordering:6,name:"Геометрия",pseudoname:"geometria"},{id:123,ordering:7,name:"Детские презентации",pseudoname:"detskie-prezentatsii"},{id:107,ordering:8,name:G,pseudoname:"informatika"},{id:109,ordering:9,name:"История",pseudoname:"istoriya"},{id:139,ordering:10,name:"Литература",pseudoname:"literatura"},{id:119,ordering:11,name:"Маркетинг",pseudoname:"marketing"},{id:114,ordering:12,name:"Математика",pseudoname:"matematika"},{id:138,ordering:h,name:"Медицина",pseudoname:"medetsina"},{id:118,ordering:14,name:"Менеджмент",pseudoname:"menedzhment"},{id:137,ordering:15,name:"Музыка",pseudoname:"muzyka"},{id:136,ordering:16,name:"МХК",pseudoname:"mhk"},{id:130,ordering:17,name:"Немецкий язык",pseudoname:"nemetskiy-yazyk"},{id:105,ordering:18,name:"ОБЖ",pseudoname:"obzh"},{id:133,ordering:19,name:"Обществознание ",pseudoname:"obshchestvoznanie"},{id:132,ordering:20,name:"Окружающий мир ",pseudoname:"okruzhayushchiy-mir"},{id:131,ordering:21,name:"Педагогика ",pseudoname:"pedagogika"},{id:129,ordering:22,name:"Русский язык",pseudoname:"russkiy-yazyk"},{id:128,ordering:24,name:"Технология",pseudoname:"tehnologiya"},{id:127,ordering:25,name:"Физика",pseudoname:"fizika"},{id:126,ordering:26,name:"Философия",pseudoname:"filosofiya"},{id:125,ordering:27,name:"Химия",pseudoname:"himiya"},{id:124,ordering:29,name:"Экология",pseudoname:"ekologiya"},{id:121,ordering:30,name:"Экономика",pseudoname:"ekonomika"},{id:120,ordering:31,name:"Юриспруденция",pseudoname:"yurisprudentsiya"}]}},state:{},_errors:{},serverRendered:e,config:{public:{SITE_NAME:I,SITE_HOST:"mypreza.com",SITE_LANG:J,API_BASE_URL:"https:\u002F\u002Fmypreza.com\u002Fapi\u002F",pwaManifest:{name:I,short_name:a,description:a,lang:J,start_url:"\u002F?standalone=true",display:"standalone",background_color:j,theme_color:"#000000",icons:[{src:"\u002F_nuxt\u002Ficons\u002F64x64.f2a6e93d.png",type:d,sizes:K,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F64x64.maskable.f2a6e93d.png",type:d,sizes:K,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F120x120.f2a6e93d.png",type:d,sizes:L,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F120x120.maskable.f2a6e93d.png",type:d,sizes:L,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F144x144.f2a6e93d.png",type:d,sizes:M,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F144x144.maskable.f2a6e93d.png",type:d,sizes:M,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F152x152.f2a6e93d.png",type:d,sizes:N,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F152x152.maskable.f2a6e93d.png",type:d,sizes:N,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F192x192.f2a6e93d.png",type:d,sizes:O,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F192x192.maskable.f2a6e93d.png",type:d,sizes:O,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F384x384.f2a6e93d.png",type:d,sizes:P,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F384x384.maskable.f2a6e93d.png",type:d,sizes:P,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F512x512.f2a6e93d.png",type:d,sizes:Q,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F512x512.maskable.f2a6e93d.png",type:d,sizes:Q,purpose:g}]},yandexMetrika:{id:"85004146",metrikaUrl:"https:\u002F\u002Fmc.yandex.ru\u002Fmetrika\u002Ftag.js",accurateTrackBounce:e,childIframe:c,clickmap:c,defer:c,useRuntimeConfig:e,trackHash:c,trackLinks:e,type:b,webvisor:c,triggerEvent:c,consoleLog:e,partytown:c,isDev:c}},app:{baseURL:"\u002F",buildAssetsDir:"\u002F_nuxt\u002F",cdnURL:a}},pinia:{app:{meta:{h1:l,main_text:a,main_title:m,main_description:n,main_keywords:o,main_image:a},app:{logo_image:p,logo_image_width:q,logo_image_height:r,logo_text:a,image_width_full:s,image_width_min:t,recaptcha_key:u,yandex_search:v,ya_context:c,banner_1:a,banner_2:a,banner_3:a,banner_4:a,banner_5:a,banner_6:a,banner_7:a,banner_8:a,banner_9:a,banner_10:a,email:w,footer_before:a,footer:a,dark_theme:c,strategy:{image_alt_words:h,item_slide_header:x,item_images:y,item_images_tag:z,item_words_h3:c,item_words_tag:A,item_words_1:h,routing:B,item_slide_skipping:C,item_download_timeout:D,item_slider_width:E,item_show_pdf:e,item_show_contents:e,item_show_filename:e},colors:{header_text:j,header_bg:i,accent:i}},social:F,token:a}}}}("",0,false,"image\u002Fpng",true,"any","maskable",13,"#d53032","#ffffff","Основы HTML","Учебные презентации","Презентации в PowerPoint на разные темы","Презентации, проекты, доклады в PowerPoint на разные темы для учебы","Презентация, на тему, урок, класс, PowerPoint, скачати презентацію, фон, шаблон, доклад, проект.","images\u002Fdata\u002Flogo.png",185,40,720,480,"6LeioWIpAAAAAGqMN4KqMVIkekcMW7fBKHjXCd-a","2503267","[e-mail]","h3a","text","none","h3","category","both",80,800,"\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","Информатика",1,"Mypreza","ru","64x64","120x120","144x144","152x152","192x192","384x384","512x512"))

Рисунок в качестве самостоятельного объекта (логотип фирмы, фотография и т. п.) вставляется тегом
(IMaGe – изображение). Обязательный атрибут – SRC (SouRCe – источник). Значением этого атрибута является URL файла с изображением.
Примеры.
– рисунок picture.gif находится в том же каталоге, что и текущий документ;
– из текущего каталога перейти в подкаталог images и взять файл picture.gif оттуда;
– указание полного пути к файлу. Обычно применяется, если рисунок находится на другом сервере или используется файл с другого сайта.

Остальные атрибуты тега
BORDER=n – рамка вокруг рисунка, где n – ее толщина в пикселах. При n = 0 (значение по умолчанию) рамка не рисуется;
WIDTH=n – задается ширина изображения в пикселах или в процентах от ширины экрана броузера (тогда после n следует знак %). По умолчанию – естественная ширина;
HEIGHT=n – высота изображения в пикселах или в процентах от высоты экрана. По умолчанию – естественная высота;
HSPACE=n – отступ слева и справа от картинки шириной в n пикселов (т.е. свободное пространство между рисунком и текстом или чем-то иным). По умолчанию 0;
VSPACE=n – вертикальный отступ от картинки в пикселах. По умолчанию 0;

Теги гиперссылок
Ссылки создаются с помощью контейнера
…
(Add – добавлять). Обязательный атрибут – HREF (Hiper REFerence – гиперссылка). При минимальном наборе атрибутов структура ссылки выглядит так:
якорь ссылки
Примеры.
нужный документ
– по двойному щелчку на тексте нужный документ обозреватель раскроет документ filename.html, находящийся в том же каталоге, что и текущий документ;
нужный документ
– ссылка с указанием полного адреса файла на другом компьютере. По двойному щелчку на тексте нужный документ установится связь с нужным компьютером и раскроется документ index.html, находящийся там по адресу /business/fax/339/.

Атрибуты тега
:
TITLE ="поясняющий текст"– всплывающая подсказка с пояснением к ссылке;
TARGET="имя
окна" – указывает, в каком окне следует раскрывать вызванный документ

Пример
Пишите письма
автору
В окне браузера появится текст:
Пишите письма автору
Если навести курсор на слово автору, то появится всплывающая подсказка Ссылка на почтовый ящик Администратора сайта.
По двойному щелчку на слове автору будет запущена почтовая программа в режиме создания сообщений, и в поле Кому автоматически будет введен адрес [e-mail]

Внутренние ссылки
Ссылки можно делать не только на внешнюю информацию, но и на внутренние места документа. Это облегчает просмотр больших документов.
Пример:
Пункт Содержания со ссылкой на Главу 1 должен выглядеть так:
Часть1 Форматирование текста

Разделение экрана на кадры
Кадры (другое название фреймы) – это области экрана, в каждую из которых можно поместить отдельный HTML-документ.
Разделение окна на кадры выполняется с помощью HTML-файла, в котором контейнер … заменен на … .
Атрибуты этого тега определяют, как разбивается экран.

Примеры:
– экран разбивается на три колонки, ширина которых задана в процентах от ширины окна броузера;
– экран разбивается на две строки, высота которых указана в процентах от высоты окна броузера.
Заполнением кадров управляют теги . Обязательный атрибут – SRC="URL документа, загружаемого в кадр".

Пример
Разбивка экрана на кадры NAME="флаг" SRC="флаг.jpg">