Скачать презентацию Лекция 14 1 Понятие языка HTML 2 Скачать презентацию Лекция 14 1 Понятие языка HTML 2

Лекция 14_кит_ма_мэ_09.ppt

  • Количество слайдов: 27

Лекция № 14 1. Понятие языка HTML. 2. Создание HTML - документа 1 Лекция № 14 1. Понятие языка HTML. 2. Создание HTML - документа 1

Hyper. Text Markup Language (HTML) является стандартным языком, предназначенным для создания гипертекстовых документов в Hyper. Text Markup Language (HTML) является стандартным языком, предназначенным для создания гипертекстовых документов в среде WEB. HTML-документы могут просматриваться различными типами WEB-броузеров. Использование HTML позволяет форматировать документы для их представления с использованием шрифтов, линий и других графических элементов на любой системе, их просматривающей. HTML-документы могут быть созданы при помощи любого текстового редактора или специализированных HTML-редакторов и конвертеров. Выбор редактора, который будет использоваться для создания HTMLдокументов, зависит исключительно от понятия удобства и личных пристрастий каждого автора. 2

Структура Web-документа Документ HTML содержит • текст (содержимое страницы) и • встроенные теги с Структура Web-документа Документ HTML содержит • текст (содержимое страницы) и • встроенные теги с инструкциями о структуре, внешнем виде и функции содержимого. Документ HTML разделяется на две основные части: заголовок — head и тело — body. Заголовок содержит такие сведения о документе, как его название и метаинформацию, описывающую содержимое. В теле находится само содержимое документа (то, что выводится в окне браузера). 3

Пример демонстрирует теги, образующие основной структурный скелет документа HTML: <HTML> <HEAD> <TITLE> Название документа Пример демонстрирует теги, образующие основной структурный скелет документа HTML: Название документа Содержимое документа 4

Теги HTML Каждый тег состоит из имени, за которым может следовать список необязательных атрибутов, Теги HTML Каждый тег состоит из имени, за которым может следовать список необязательных атрибутов, все они находятся внутри угловых скобок < >. Содержимое скобок никогда не выводится в окне браузера. 5

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

Контейнеры Большинство тегов являются контейнерами. Это означает, что у них имеется открывающий и закрывающий Контейнеры Большинство тегов являются контейнерами. Это означает, что у них имеется открывающий и закрывающий теги. Конечный тег имеет то же имя, что и начальный, но перед ним стоит символ слеш ( / ). Конечный тег никогда не содержит атрибутов. Контейнерные теги обозначаются следующим образом: < >. . . < / >. 7

Например: Текст будет <u> подчеркнут </u>. Результат: Текст будет подчеркнут. В некоторых случаях конечный Например: Текст будет подчеркнут . Результат: Текст будет подчеркнут. В некоторых случаях конечный тег не обязателен, и браузер определяет конец тега из контекста. Это разрешено не всем тегам, и не все браузеры прощают их отсутствие. 8

Автономные теги Некоторые теги не имеет завершающих тегов, потому что они используются для размещения Автономные теги Некоторые теги не имеет завершающих тегов, потому что они используются для размещения отдельных (автономных) элементов на странице. Одним из них является тег изображения , он просто помещает графику в поток страницы. Другие автономные теги: • разрыв строки ; • горизонтальная линейка

; • теги, содержащие информацию о документе и не влияющие на содержимое, выводимое на экран, такие как и . 9

Атрибуты добавляются в тег для расширения или модификации его действий. К одному тегу можно Атрибуты добавляются в тег для расширения или модификации его действий. К одному тегу можно добавить несколько атрибутов. Если атрибуты тега следуют после имени тега, они разделяются одним или несколькими пробелами. Порядок следования не важен. Большинство атрибутов имеют значения, которые следуют за знаком равенства (=), находящимся после имени атрибута. 10

Разработка Web-сайта Структурные теги HTML 1. Тег <html> (<html> … </html>) Этот тег помещают Разработка Web-сайта Структурные теги HTML 1. Тег ( … ) Этот тег помещают в начало и конец документа, сообщая браузеру, что весь документ составлен на HTML. 2. Тег (. . . ) Тег определяет заголовок, то есть часть документа, которая содержит информацию о документе. Тег не имеет собственных атрибутов, он используется в качестве контейнера для других тегов заголовка, таких как , и . 3. Тег <title> определяет название документа, которое появится в верхней строке окна браузера. 11 </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Пример: <head> <title> Моя страничка Тег является обязательным, теги <meta>, <base>" src="https://present5.com/presentation/66749589_166746756/image-12.jpg" alt="Пример: <head> <title> Моя страничка Тег является обязательным, теги <meta>, <base>" /> Пример: <head> <title> Моя страничка Тег является обязательным, теги <meta>, <base> не обязательными. 12 </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Тег <body> (<body>…</body>) Тег <body> определяет начало и конец основной части (часть документа, которая" src="https://present5.com/presentation/66749589_166746756/image-13.jpg" alt="Тег <body> (<body>…</body>) Тег <body> определяет начало и конец основной части (часть документа, которая" /> Тег <body> (<body>…</body>) Тег <body> определяет начало и конец основной части (часть документа, которая выводится в окно браузера) HTMLдокумента. Атрибуты этого тега оказывают влияние на весь документ. Атрибуты тега <body>: 1. background = url Задает путь к графическому файлу, который будет использован в качестве фоновой заставки документа. 13 </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="2. bgcolor = "#rrggbb" или имя цвета Задает фоновый цвет документа. 3. text =" src="https://present5.com/presentation/66749589_166746756/image-14.jpg" alt="2. bgcolor = "#rrggbb" или имя цвета Задает фоновый цвет документа. 3. text =" /> 2. bgcolor = "#rrggbb" или имя цвета Задает фоновый цвет документа. 3. text = "#rrggbb” или имя цвета Устанавливает цвет по умолчанию для всего текста документа. 4. link = "#rrggbb" или имя цвета Устанавливает цвет по умолчанию для всех ссылок, имеющихся в документе. 5. alink = "#rrggbb" или имя цвета Задает цвет активной ссылки (то есть цвет ссылки, выбираемой щелчком на ней кнопки мыши). 6. vlink = "#rrggbb" или имя цвета Устанавливает цвет посещенных ссылок. 14 </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Пример : <HTML> <HEAD> <TITLE> Моя страничка Основной текст " src="https://present5.com/presentation/66749589_166746756/image-15.jpg" alt="Пример : Моя страничка Основной текст " /> Пример : Моя страничка Основной текст 15

Форматирование документа. <H 1>. . . </H 1>, <H 2>. . . </H 2>. Форматирование документа. . . . , . . . . . . . . . Теги вида (где i цифра от 1 до 6) описывают заголовки шести различных уровней. Заголовок первого уровня () самый крупный, шестого уровня, естественно самый мелкий.

. . .

Все, что заключено между

и

составляет один абзац. 16

Теги <Hi> и <P> могут содержать дополнительный атрибут ALIGN (выравнивание), например: <p ALIGN=CENTER>абзац выравнивается Теги и

могут содержать дополнительный атрибут ALIGN (выравнивание), например:

абзац выравнивается по центру окна

абзац выравнивается по правому краю

абзац выравнивается по левому краю окна

17

Пример: <html> <head> <title>Второй HTML-документ</title> </head> <body> <H 1 ALIGN=CENTER>Ваше название HTMLдокумента</H 1> <P Пример: Второй HTML-документ Ваше название HTMLдокумента

Это простейший пример выравнивания HTML-документа.

Это простейший пример выравнивания HTML-документа.

Это простейший пример выравнивания HTML-документа.

18

Тег <center> (<center>…</center>) Центрирует вложенный текст горизонтально на странице. Тег <b> (<b>…<b>) Вложенный текст Тег

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

Tег <font> (<font>…</font>) Тег <font> позволяет управлять стилем, цветом, размером и видом шрифта в Tег (…) Тег позволяет управлять стилем, цветом, размером и видом шрифта в гораздо большей степени, чем стандартные теги и . Он использует для этого атрибуты size, color и face. Тег конца строки. Аналогичен тегу нового абзаца только он не вводит пустую строку после отделяемого им текста. 20

Пример: Это обычный текст <center> <b> Этот текст будет отображен полужирным шрифтом и по Пример: Это обычный текст

Этот текст будет отображен полужирным шрифтом и по центру
Этот текст будет выведен курсивом Этот текст подчеркнут Это обычный текст Шрифт этого текста иной Kpacный текст П пpимep П пpимep 21

Допустим, Вам нужно включить в документ изображение," src="https://present5.com/presentation/66749589_166746756/image-22.jpg" alt="Изображения в HTML-документе Тег Допустим, Вам нужно включить в документ изображение," /> Изображения в HTML-документе Тег Допустим, Вам нужно включить в документ изображение, записанное в файл name. gif или name. jpg , находящийся в одном каталоге с HTML-документом. Тогда строчка реализующая это будет следующая: Файл, содержащий изображение, может находиться в другом каталоге или даже на другом сервере. В этом случае стоит указать его URL c именем. 22

Ссылки на web-страницах Тег <a href>. Тег <a> называется якорным тегом. Он применяется для Ссылки на web-страницах Тег . Тег называется якорным тегом. Он применяется для ссылок на другие Webстраницы. Ключевое слово href якорного тега сообщает браузеру, на что вы ссылаетесь. Не забудьте про закрывающий тег . Пример: новости 23

Фраза «новости» появится на экране в виде текста ссылки. Когда посетители щелкнут мышью на Фраза «новости» появится на экране в виде текста ссылки. Когда посетители щелкнут мышью на этом тексте, они откроют файл index. html. Значение border=0 на практике используется для отмены вывода границы. Проверьте, не забыли ли вы, если это необходимо, указать путь к файлам, на которые ссылаетесь. 24

Списки Ненумерованные списки: <UL>. . . </UL> <LI>один <LI>два; <LI>три </UL> Нумерованные списки: <OL>. Списки Ненумерованные списки:

    . . .
  • один
  • два;
  • три Нумерованные списки:
      . . .
  • один
  • два;
  • три 25

    • Пример вложенного списка. <html> <head> <title>HTML-документ-списки</title> </head> <body> <H 1 ALIGN=CENTER>Списки в HTML</H 1> Пример вложенного списка. HTML-документ-списки Списки в HTML

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

    • один
    • два;
    26

    <p>Нумерованные списки</p> <OL> <LI>один <UL> <LI>один <LI>два; </UL> <LI>два; </OL> </body> </html> 27

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

    1. один
      • один
      • два;
    2. два;
    27