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

Содержание

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

Слайд 1Язык гипертекстовой разметки НТМL

Язык гипертекстовой разметки НТМL

Слайд 2Hyper Text Markup Language - «HTML» (язык разметки гипертекста) – набор команд

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

Язык HTML интерпретируется браузерами и отображается в виде документа, в удобной для человека форме.

Hyper Text Markup Language - «HTML» (язык разметки гипертекста) – набор команд (тегов), вставляемых в текст Web -страницы

Слайд 3Основные термины которые употребляются в HTML

Основные термины которые употребляются в HTML

Слайд 4HTML-файл или HTML-страница - документ, созданный в виде гипертекста на основе

языка HTML. Такие файлы имеют расширения htm или html.

Апплет (applet) — программа, передаваемая на компьютер клиента в виде отдельного файла и запускаемая при просмотре Web-страницы.

Скрипт или сценарий (script) - программа, включенная в состав Web-страницы для расширения ее возможностей.

HTML-файл или HTML-страница - документ, созданный в виде гипертекста на основе языка HTML. Такие файлы имеют расширения

Слайд 5Гипертекст – «многомерный» текстовый документ (либо объединение нескольких текстовых документов), построенный

по принципу «нелинейного» структурирования материала за счет применения гипертекстовых ссылок (как внутренних, в пределах одного документа, так и перекрестных, указывающих на другие документы, в том числе размещенные на других компьютерах сети, или на их фрагменты), позволяющих одним щелчком мыши перемещаться из одной «смысловой точки» гипертекстового документа в другую.
Гипертекст – «многомерный» текстовый документ (либо объединение нескольких текстовых документов), построенный по принципу «нелинейного» структурирования материала за

Слайд 6Код HTML — гипертекстовый документ в своем первоначальном виде, когда видны

все элементы и атрибуты.
Web-страница - документ (файл), подготовленный в формате гипертекста и размещенный в World Wide Web.
Сайт (site) — набор Web-страниц, расположенных в одном месте и связанных между собой.
Браузер (browser) - программа для просмотра Web-страниц.
Загрузка (downloading) - копирование файлов с сервера на компьютер-клиент.
URL (Uniform Resource Locator) или универсальный указатель ресурса - адрес некоторого объекта в Интернете. Типичный URL для WWW имеет вид: http://www.название.домен/имя файла
Код HTML — гипертекстовый документ в своем первоначальном виде, когда видны все элементы и атрибуты.Web-страница - документ

Слайд 7Тег (tag) - начальный или конечный маркеры элемента. Теги определяют границы

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

Слайд 8Тэги бывают одиночными, открывающими и закрывающими и состоят из следующих друг

за другом в определенном порядке элементов:

1. левой угловой скобки <;
2. имени тэга, например html;
3. необязательного символа слэш /, который означает, что тэг является конечным, т. е. закрывающим некоторую структуру, (например (символ / можно читать как конец некоторого элемента разметки, например строки или абзаца);
4. необязательных атрибутов (тэг может быть без атрибутов или сопровождаться одним или несколькими атрибутами, например align = «center»);
5. правой угловой скобки >.
Тэги бывают одиночными, открывающими и закрывающими и состоят из следующих друг за другом в определенном порядке элементов:1.

Слайд 9Элемент (element) - конструкция языка HTML. Это объект, содержащий данные и

позволяющий отформатировать их определенным образом. Любая Web-страница представляет собой набор элементов. Одна из основных идей гипертекста — возможность вложения элементов.

например: текст - это элемент, в котором можно выделить три части:
 - открывающий тег ;
текст - содержимое элемента (в данном примере, текст);
 - закрывающий тег;
Элемент (element) - конструкция языка HTML. Это объект, содержащий данные и позволяющий отформатировать их определенным образом. Любая

Слайд 10Контейнер – конструкция из парных «открывающих» и «закрывающих» тегов. При этом

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

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


Контейнер – конструкция из парных «открывающих» и «закрывающих» тегов. При этом действие открывающего тега и его параметров

Слайд 11Атрибут (attribute) - параметр или свойство элемента. Другими словами это переменная,

которая имеет стандартное имя и которой может присваиваться определенный набор значений: стандартных или произвольных. Предполагается, что символьные значения атрибутов заключаются в прямые кавычки, но некоторые браузеры позволяют не использовать кавычки. Это объясняется тем, что тип атрибута всегда известен заранее. Атрибуты располагаются внутри начального тега и отделяются друг от друга пробелами.
Атрибут (attribute) - параметр или свойство элемента. Другими словами это переменная, которая имеет стандартное имя и которой

Слайд 12 например:
Как Вы видите, в этом примере: bgcolor - параметр, blue

- атрибут text - параметр, yellow - атрибут В данном случае мы указали, что фон HTML-документа будет синим, а текст документа желтым.
 например: Как Вы видите, в этом примере: bgcolor - параметр, blue - атрибут text - параметр, yellow

Слайд 13Фрейм (frame) — этот термин имеет два значения. Первое — область

документа со своими полосами прокрутки. Второе значение — одно изображение в сложном (анимационном) графическом файле (похожее на  кадр из кинофильма). Также возможно вместо термина «фрейм» в специальной литературе и локализованных программных продуктах можно встретить термин «кадр» или «рамка».
Фрейм (frame) — этот термин имеет два значения. Первое — область документа со своими полосами прокрутки. Второе

Слайд 14Структура 
Web-страницы

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

Слайд 15

Для того, чтобы создать простейшую html - потребуется указать в нужном

порядке всего 3 тега:
html (язык html),
head (голова),
body(тело).
Таким образом строятся большинство страниц в интернете - это основа языка html для начинающих. То есть в теге head (голова) указывается такие составляющие, как название или описание сайта, а в теге body(тело) основной текст.

 


 

Для того, чтобы создать простейшую html - потребуется указать в нужном порядке всего 3 тега: html (язык

Слайд 16Простейший HTML-документ выглядит так:
Простейший HTML-документ Тело документа - текст, фотографии и всё

остальное, что будут видеть посетители Вашего сайта.
Простейший HTML-документ выглядит так: Простейший HTML-документ Тело документа

Слайд 17В данном примере элемент HTML явно указывает браузеру, что им будет обрабатываться HTML-код.
Заголовок

HTML-документа находится в элементе HEAD, его иногда называют "шапкой", и содержит информативные элементы. TITLE - заголовок документа, его Вы можете видеть в самом верху браузера. Например, для этой страницы "Простейший HTML-документ".
Элемент BODY - тело документа, вся его содержательная часть, текст, фотографии и так далее...  (рассмотрим позже)
В данном примере элемент HTML явно указывает браузеру, что им будет обрабатываться HTML-код.Заголовок HTML-документа находится в элементе HEAD, его иногда

Слайд 18Обратите внимание:  ...   Только такая очередность написания тэгов верна: тэг, который

мы открыли первым - закрываем последним, второй - предпоследним и так далее.  Следующая очередность написания тегов нежелательна и не верна, она может привести к ошибкам на вашей страничке:  <тэг1><тэг2><тэг3> ...   
Обратите внимание:  ...   Только такая очередность написания тэгов верна: тэг, который мы открыли

Слайд 19

ОФОРМЛЕНИЕ ТЕКСТА. ВЫРАВНИВАНИЕ АБЗАЦЕВ.
ЗАГОЛОВКИ И ПОДЗАГОЛОВКИ.
УПРАВЛЕНИЕ НАЧЕРТАНИЕМ ТЕКСТА

… -

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

…

- Выравнивание по левому краю

…

- Выравнивание по правому краю

…

- Выравнивание по ширине


…

- Самый крупный заголовок
…
- Самый маленький заголовок



… - Полужирное начертание текста
… - Курсивное начертание текста

ОФОРМЛЕНИЕ ТЕКСТА. ВЫРАВНИВАНИЕ АБЗАЦЕВ.ЗАГОЛОВКИ И ПОДЗАГОЛОВКИ. УПРАВЛЕНИЕ НАЧЕРТАНИЕМ ТЕКСТА… - Выравнивание по центру… - Выравнивание по левому

Слайд 20Пример 1

Пример 1

Слайд 21Пример 2

Пример 2

Слайд 22Пример 3

Пример 3

Слайд 23Задание

Задание

Слайд 24
… - Шрифт
… - Размер шрифта
…

- Сколько прибавить к данному размеру шрифта
… - Сколько уменьшить от данного размера шрифта
… - Цвет шрифта
… - Увеличение размера шрифта на одну единицу
… - Уменьшение размера шрифта на одну единицу
… - Подстрочный индекс
… - Надстрочный индекс
… - Текст типа «пишущая машинка»
…
- Вывод текста на экран так, как он записан в HTML-коде

ОФОРМЛЕНИЕ ТЕКСТА. ИЗМЕНЕНИЕ ПАРАМЕТРОВ ШРИФТА

… - Шрифт… - Размер шрифта… - Сколько прибавить к данному размеру шрифта… - Сколько уменьшить от

Слайд 25Пример 1

Пример 1

Слайд 26Пример 2

Пример 2

Слайд 27Пример 3

Пример 3

Слайд 28Задание

Задание

Слайд 29СПИСКИ. ТИПЫ СПИСКОВ

- элемент списка. Конечный тег не обязателен

type=cicrcle> - окружность
    - диск
      - квадрат
        - нумерация арабскими цифрами (1, 2, …)
          - нумерация прописными буквами (A, B, …)
            - нумерация строчными буквами (a, b, …)
              - нумерация «прописными» римскими цифрами (I, II, …)
                - нумерация «строчными» римскими цифрами (I, ii, …)
                …
                - задает многоуровневый список. Конечный тег обязателен
                - элемент списка первого уровня. Конечный тег не обязателен.
                - элемент списка второго уровня. Конечный тег
                не обязателен.
СПИСКИ. ТИПЫ СПИСКОВ - элемент списка. Конечный тег не обязателен - окружность - диск - квадрат -

Слайд 30Пример 1

Пример 1

Слайд 31Пример 2

Пример 2

Слайд 32Пример 3

Пример 3

Слайд 33Пример 4

Пример 4

Слайд 34Задание

Задание

Слайд 35ГРАФИКА

src=“имя файла” – параметр src – указывает имя файла
src=“имя файла” alt=“текст_надписи”

– параметр alt – позволяет снабдить картинку текстовой подписью
src=“имя файла” width=значение в пикселях или в процентах> - ширина изображения
src=“имя файла” height=значение в пикселях или в процентах> - высота изображения
src=“имя файла” border=значение в пикселях> - толщина рамки вокруг рисунка
src=“имя файла” hspace=значение в пикселях> - поля слева и справа от рисунка
src=“имя файла” vspace=значение в пикселях> - поля сверху и снизу от рисунка

ГРАФИКАsrc=“имя файла” – параметр src – указывает имя файлаsrc=“имя файла” alt=“текст_надписи” – параметр alt – позволяет снабдить

Слайд 36
src=“имя файла” align=top | middle | bottom | left | right

| center> - задает положение рисунка по отношению к соседним элементам документа
top – вертикальное выравнивание по верхнему краю
middle – вертикальное выравнивание по центру
bottom – вертикальное выравнивание по нижнему краю
left – горизонтальное выравнивание по левому краю
right – горизонтальное выравнивание по правому краю
center – горизонтальное выравнивание по центру
src=“имя файла” align=top | middle | bottom | left | right | center> - задает положение рисунка

Слайд 37Пример 1

Пример 1

Слайд 38Пример 2

Пример 2

Слайд 40Пример 3

Пример 3

Слайд 41Пример 3

Пример 3

Слайд 42Задание

Задание

Слайд 43ВНУТРЕННИЕ ГИПЕРССЫЛКИ
текст ссылки - Привязка ссылки к какой

– либо странице/документе.
целевой текст - Задание местоположения якоря
… - цвет ещё не посещенной ссылки
… - цвет уже посещенной ссылки
… - цвет ссылки в момент щелчка
ВНУТРЕННИЕ ГИПЕРССЫЛКИ текст ссылки - Привязка ссылки к какой – либо странице/документе. целевой текст - Задание

Слайд 44Пример 1

Пример 1

Слайд 46Задание

Задание

Слайд 47ТАБЛИЦЫ (ПРОДОЛЖЕНИЕ)
…, …
- параметр colspan количество столбов, которые

необходимо объединить в один столбец
…, … - параметр rowspan количество строк, которые необходимо объединить в одну строку
- вид разлиновки
- выравнивание ячеек
- расстояние между содержимым ячейки и ее обрамлением | между ячейками таблицы
- цвет фона таблицы, строки или ячейки
- файл фоновой картинки для таблицы или отдельной ячейки
ТАБЛИЦЫ (ПРОДОЛЖЕНИЕ) …, … - параметр colspan количество столбов, которые необходимо объединить в один столбец…, … -

Слайд 48 - толщина линий разлиновки таблицы

| td bordercolor=“цвет”> - цвет линий разлиновки для таблицы, строки или отдельной ячейки


- толщина линий разлиновки таблицы - цвет линий разлиновки для таблицы, строки или отдельной ячейки

Слайд 49Пример 1

Пример 1

Слайд 50ОФОРМЛЕНИЕ СТРАНИЦЫ С ТАБЛИЦАМИ. СПЕЦИАЛЬНЫЕ СИМВОЛЫ
… - Горизонтальная линия (отлиновка)

bgcolor=цвет> - цвет фона web-страницы
- файл фоновой картинки для web-страницы
- ширина полей web-страницы слева и справа, в пикселях
- ширина полей web-страницы сверху и снизу, в пикселях
- таблица может предваряться заголовком, который располагается между тегами . Они должны располагаться после тега
… и
.

ОФОРМЛЕНИЕ СТРАНИЦЫ С ТАБЛИЦАМИ. СПЕЦИАЛЬНЫЕ СИМВОЛЫ … - Горизонтальная линия (отлиновка) - цвет фона web-страницы - файл

Слайд 51Top – заголовок располагается над таблицей и выровнен по центру
Left –

заголовок над таблицей слева
Right - заголовок над таблицей справа
Bottom - заголовок под таблицей, выровнен по центру


Top – заголовок располагается над таблицей и выровнен по центруLeft – заголовок над таблицей слеваRight - заголовок

Слайд 52Пример 1

Пример 1

Слайд 54Задание

Задание

Слайд 55ГИПЕРССЫЛКИ. КАРТЫ-ИЗОБРАЖЕНИЯ (IMAGEMAP)
активный текст - ссылка на другую web-страницу

или на произвольный файл
активный текст - ссылка на закладку в другом HTML-документе
активный текст - Создание закладки
- Картинка является ссылкой на другой web-документ или файл
.. - цвет не посещенной ссылки | цвет ранее посещенной ссылки | цвет «активной» ссылки
… - между тегами находятся данные для карты-изображения, в том числе имя карты.
-
- описание «активной зоны» карты-изображения
- rect – прямоуольник, circle - окружность, poly - многоугольник, default – вся картинка целиком
- ссылка для гипертекстового перехода
“текст” - текст «всплывающего подсказки»
ГИПЕРССЫЛКИ. КАРТЫ-ИЗОБРАЖЕНИЯ (IMAGEMAP) активный текст - ссылка на другую web-страницу или на произвольный файлактивный текст - ссылка

Слайд 56

центра и радиус”>

- rect – прямоуольник, circle - окружность, poly - многоугольник, default – вся картинка целиком
- ссылка для гипертекстового перехода
“текст” - текст «всплывающего подсказки»

- rect – прямоуольник, circle - окружность, poly - многоугольник, default – вся картинка целиком - ссылка

Слайд 57Пример 1

Пример 1

Слайд 58Пример 2

Пример 2

Слайд 59ФРЕЙМЫ
… - разбивка окна браузера на фреймы (по вертикали и/или горизонтали)

rows=*>… - Высота фреймов (в пикселях, в процентах или относительный размер)
… - Ширина фреймов (в пикселях, в процентах или относительный размер)
… - Толщина рамки фреймов
… - Наличие рамки (1) или ее отсутствие (0)
… - Грница не выводится вовсе или выводится типовая разлиновка
… - Цвет рамки фреймов
- задание параметров каждого из создаваемых фреймов
- имя файла, который будет загружен в данный фрейм изначально
ФРЕЙМЫ … - разбивка окна браузера на фреймы (по вертикали и/или горизонтали)… - Высота фреймов (в пикселях,

Слайд 60 - имя файла, который будет загружен в данный фрейм

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


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

Слайд 61Пример 1

Пример 1

Слайд 63ПЛАВАЮЩИЕ ФРЕЙМЫ

изначально
Name=«имя» - присваивает фрейму индивидуальное имя
Width=px | % - ширина фрейма (пиксели или проценты)
height=px | % - высота фрейма (пиксели или проценты)
Hspace= px | % - поля слева и справа от фрейма
Vspace= px | % - поля сверху и снизу от фрейма
Align=center | left | right – выравнивание фрейма по горизонтали

Behavior=scroll | slide | alternate – режим вывода бегущей строки.
Bgcolor=“цвет” цвет фона бегущей строки
Direction=left | right – направление бегущей строки
ПЛАВАЮЩИЕ ФРЕЙМЫ

Слайд 64Loop=число | infinite – количество повторений
Width=px – ширина области бегущей строки
Height=px

– высота области бегущей строки
Scrollamount=число – скорость перемещения бегущей строки (от 1 до 3000)

Loop=число | infinite – количество повторенийWidth=px – ширина области бегущей строкиHeight=px – высота области бегущей строкиScrollamount=число –

Слайд 65Пример 1

Пример 1

Слайд 66ВЗАИМОДЕЙСТВИЕ МЕЖДУ ФРЕЙМАМИ
… - разбивка окна браузера на фреймы (по вертикали

и/или горизонтали)
… - Высота фреймов (в пикселях, в процентах или относительный размер)
… - Ширина фреймов (в пикселях, в процентах или относительный размер)
… - Толщина рамки фреймов
… - Наличие рамки (1) или ее отсутствие (0)
… - Грница не выводится вовсе или выводится типовая разлиновка
… - Цвет рамки фреймов
- задание параметров каждого из создаваемых фреймов

ВЗАИМОДЕЙСТВИЕ МЕЖДУ ФРЕЙМАМИ … - разбивка окна браузера на фреймы (по вертикали и/или горизонтали)… - Высота фреймов

Слайд 67 - имя файла, который будет загружен в данный фрейм

изначально
- индивидуальное имя фрейма
… - параметр target – указывает имя фрейма

- имя файла, который будет загружен в данный фрейм изначально - индивидуальное имя фрейма… - параметр

Слайд 68Пример 1

Пример 1

Слайд 70ФОРМЫ

Ширина поля
Maxlength=“…” – Максимальная ширина поля

Name=“…” – Имя списка
Size=“…” – кол-во отображаемых пунктов списка
Multiple – возможность множественного выбора


ФОРМЫ

Слайд 71Rows=n cols=m – тег, определяющий интерактивный элемент формуляра – текстовую область

указанного размера (n строк x m символов)
Name=“…” – Имя текстовой области
Wrap=off | virtual | physical – разбивка текста в текстовой области на строки (off – не производится , virtual - автоматическая , physical – по нажатию клавиши Enter).