Презентация на тему "Html"

Содержание

• 
  Слайд 1

  HTML

• 
  Слайд 2

  План

  Общая структура документа Теги для работы со строками Форматирование символов Списки Таблицы

• 
  Слайд 3

  1. Общая структура документа

  HTML (HyperTextMarkupLanguage – "язык разметки гипертекста") – стандартный язык разметки документов во Всемирной паутине. Большинство веб-страниц создаются при помощи языка HTML. Язык HTML интерпретируется браузером и отображается в виде документа, в удобной для человека форме. HTML является приложением SGML (стандартного обобщенного языка разметки) и соответствует международному стандарту ISO 8879. Язык HTML был разработан британским ученым ТимомБернерсом-Ли приблизительно в 1991-1992 годах в стенах Европейского совета по ядерным исследованиям в Женеве (Швейцария).

• 
  Слайд 4

  Популярные браузеры

  Internet Explorer Mozilla Firefox Google Chrome Safari Opera

• 
  Слайд 5

  Спецификация HTMLимеет несколько версий

  RFC 1866 – HTML 2.0, одобренный как стандарт 22 сентября 1995 года; HTML 3.2 – 14 января 1997 года; HTML 4.0 – 18 декабря 1997 года; HTML 4.01 – 24 декабря 1999 года; ISO/IEC 15445:2000 (так называемый ISO HTML, основан на HTML 4.01 Strict) – 15 мая 2000 года; HTML 5 – в разработке.

• 
  Слайд 6

  Структура HTML документа

  HTML– это теговый язык разметки документов. Чтобы браузер понимал, что имеет дело не с простым текстом, а с особым элементом, который задает его форматирование, применяются теги. Теги являются основой HTMLи берутся в угловые скобки. Общий синтаксис написания тегов следующий. ... тег>

• 
  Слайд 7
  

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

• 
  Слайд 8

  Рекомендации и свойства написания тегов

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

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

  Общая структура документа

  Это заголовок страницы Здравствуйте!

  Это моя первая страница HTML. Этот текст выводится жирным шрифтом.

• 
  Слайд 10

  2. Теги для работы со строками

• 
  Слайд 11

  Параграфы

  Это параграф 1.

  Это параграф 2.

  Это параграф 3.

• 
  Слайд 12

  Заголовки

  Заголовки определяются с помощью тегов от

  до . определяет заголовок самого большого размера, а определяет заголовок самого маленького размера. Это заголовок первого уровня Это заголовок второго уровня Это заголовок третьего уровня Это заголовок четвертого уровня Это заголовок пятого уровня Это заголовок шестого уровня
• 
  Слайд 13

  Переносы строк

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

  Это параграф с переносами строк

• 
  Слайд 14

  Горизонтальная линейка

  Разделять различные элементы можно при помощи горизонтальной линейки, для этого используйте тег

  :

  Этот параграф отобразится сверху горизонтальной полосы.

  Этот параграф отобразится снизу горизонтальной полосы.

• 
  Слайд 15

  Комментарии в HTML

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

• 
  Слайд 16
  

  Этот пример демонстрирует некоторые особенности поведения по умолчанию элементов параграфа.

  Этот параграф содержит много строк в исходном коде, но браузер это игнорирует.

  Этот параграф содержит много пробелов в исходном коде, но браузер это игнорирует.

• 
  Слайд 17

  3. Форматирование символов

  … или … - вывод курсивом, - структурный элемент … или ... - вывод жирным шрифтом, - структурный элемент … - верхний индекс и … - нижний индекс
• 
  Слайд 18
  

  Тег

  сообщает браузеру, что находящийся внутри текст должен быть выведен как есть. Это предварительно форматированный текст. Он сохраняет как пробелы, так и переносы строк.
• 
  Слайд 19
  

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

• 
  Слайд 20
  

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

  Версии стандарта HTML обычно маркируются следующим образом x.у.

• 
  Слайд 21
  

  Этот пример показывает, как изменять направление вывода текста.

  Если используемый браузер поддерживает двунаправленное представление (bdo), то следующая строка будет записана справа налево (rtl):

  Здесь какой-то арабский текст
• 
  Слайд 22

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

  Здесь представлена длинная цитата: Это длинная цитата. Это длинная цитата. Это длинная цитата. Это длинная цитата. Это длинная цитата. Здесь представлена короткая цитата: Это короткая цитата

  Для элемента blockquote браузер вставляет дополнительные переносы строки, пустые строки и поля, но элемент q не изображается каким-то специальным образом.

• 
  Слайд 23

  Символьные элементы

  Некоторые символы, такие как символ

• 
  Слайд 24

  Таблица наиболее часто используемых символьных объектов

• 
  Слайд 25

  4. Создание гиперссылок

  Этот пример показывает, как создавать ссылки в документе HTML.

  Этот текст является ссылкой на страницу на этом Web-сайте.

  Этот текст является ссылкой на страницу во Всемирной Паутине.

• 
  Слайд 26

  Изображение в виде ссылки

  Можно также использовать в качестве ссылки изображение:

• 
  Слайд 27

  Синтаксис гипертекстовой ссылки

  текст ссылки
• 
  Слайд 28
  

  С помощью атрибута hrefможно задавать ссылки не только по протоколу HTTP, но и по другим:

  http://... - создает ссылку на www-документ; ftp://... - создает ссылку на ftp-сайт или расположенный на нем файл; mailto:... - запускает почтовую программу-клиент с заполненным полем имени получателя. Если после адреса поставить знак вопроса, то можно указать дополнительные атрибуты, разделенные знаком "&"; news:.. - создает ссылку на конференцию сервера новостей; telnet://... - создает ссылку на telnet-сессию с удаленной машиной; wais://... - создает ссылку на WAIS - сервер; gopher://... - создает ссылку на Gopher - сервер;

• 
  Слайд 29
  

  С помощью атрибута targetможно определить, где будет открыт документ, на который указывает ссылка. В качестве значения необходимо задать либо имя одного из существующих фреймов, либо одно из следующих зарезервированных имен: _self- указывает, что определенный в параметре hrefдокумент должен отображаться в текущем фрейме; _parent- указывает, что документ должен отображаться во фрейме-родителе текущего фрейма. Иначе говоря, _parentссылается на окно, содержащее frameset, включающий текущий фрейм; _top- указывает, что документ должен отображаться в окне-родителе всей текущей фрэймовой структуры; _blank- указывает, что документ должен отображаться в новом окне.

• 
  Слайд 30
  Добро пожаловать! Добро пожаловать! Добро пожаловать! Добро пожаловать!
• 
  Слайд 31
  

  Для перехода внутри страницы к конкретному разделу используют атрибут nameтега гипертекстовой ссылки a, при помощи которого создается именованный якорь. ссылка на именованный якорь

• 
  Слайд 32
  

  В данном примере внутри документа создается своеобразная метка, при этом именованный якорь никак не отображается в окне браузера. Для перехода на место, которое отмечено именованным якорем используется знак # и имя якоря в конце URL следующим образом: переход на именованный якорь Переход внутри файла "page1.html" на именованный якорь выглядит следующим образом: переход на именованный якорь Если браузер не сможет найти указанный именованный якорь на вызываемой странице, то переход произойдет на начало документа, при этом сообщения об ошибке доступа не возникает.

• 
  Слайд 33

  5. Списки

  Упорядоченные Неупорядоченные

• 
  Слайд 34
  

  Неупорядоченный список начинается с тега

  . Каждый элемент списка начинается с тега
  • . Неупорядоченный список:
    • элемент 1
    • элемент 2
    • элемент 3
• 
  Слайд 35

  Упорядоченные списки

  Упорядоченный список начинается с тега

  . Каждый элемент списка начинается с тега
  1. . У тега
     может быть два атрибута: start (определяет первое число, с которого начинается нумерация пунктов) и type (определяет стиль нумерации пунктов). Может иметь значения: "A" - заглавные буквы A, B, C ... "a" - строчные буквы a, b, c ... "I" - большие римские числа I, II, III ... "i" - маленькие римские числа i, ii, iii ... "1" - арабские числа 1, 2, 3 ...
• 
  Слайд 36
  Упорядоченный список:

  1. элемент 1
  2. элемент 2
  3. элемент 3
• 
  Слайд 37

  Вложенные списки

  Вложенный список:

  • элемент 1
  • элемент 2
  • элемент 2.1
  • элемент 2.2
  • элемент 3
• 
  Слайд 38

  Списки определений

  Список определений не является списком элементов. Это список терминов и определений терминов. Список определений начинается с тега

  . Каждый термин списка определений начинается с тега . Каждое определение списка начинается с тега .
• 
  Слайд 39
  элемент 1 описание элемента 1 элемент 2 описание элемента 2
• 
  Слайд 40

  5. Таблицы

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

  . Элемент TABLE представляет собой тег-контейнер, в котором размещается содержимое таблицы. Построение таблицы осуществляется по строкам, для обозначения которых применяется контейнер TR. Внутри контейнера строк помещаются контейнеры для обозначения ячеек. Стандарт HTML определяет два типа контейнеров для обозначения ячеек и . Первый предназначен для обозначения заголовков, а второй для данных в ячейках. Отличие этих двух элементов заключается лишь в том как их содержимое отображается браузером, заголовки большинство браузеров выделяют полужирным шрифтом и центрируют в своих ячейках. Ячейка данных может содержать текст, изображения, списки, параграфы, формы, горизонтальные линейки, таблицы и т. д.
• 
  Слайд 41

  Пример таблицы: одна ячейка

  Одна строка и одна ячейка
• 
  Слайд 42

  Пример таблицы: одна строка и три столбца

  столбец 1 столбец 2 столбец 3
• 
  Слайд 43

  Пример таблицы: две строки и три столбца

  1.1 1.2 1.3 2.1 2.2 2.3
• 
  Слайд 44

  Для тега table определены следующие атрибуты.

  align- определяет способ горизонтального выравнивания таблицы на странице. Возможные значения: left, center, right. Значение по умолчанию - left. valign- должен определять способ вертикального выравнивания для содержимого таблицы. Возможные значения: top, bottom, middle. border- определяет ширину внешней рамки таблицы (в пикселах). При BORDER="0"или при отсутствии этого параметра рамка отображаться не будет. cellpadding- определяет расстояние (в пикселах) между рамкой каждой ячейки таблицы и содержащимся в ней материалом. cellspacing- определяет расстояние (в пикселах) между границами соседних ячеек. width- определяет ширину таблицы. Ширина задается либо в пикселах, либо в процентном отношении к ширине окна браузера. По умолчанию этот параметр определяется автоматически в зависимости от объема содержащегося в таблице материала. height- определяет высоту таблицы. Высота задается либо в пикселах, либо в процентном отношении к высоте окна браузера. По умолчанию этот параметр определяется автоматически в зависимости от объема содержащегося в таблице материала. bgcolor- определяет цвет фона ячеек таблицы. Задается либо RGB-значением в шестнадцатиричной системе, либо одним из 16 базовых цветов. background- позволяет заполнить фон таблицы рисунком. В качестве значения необходимо указать URL рисунка.

• 
  Слайд 45
  

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

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

  Для тегов

  и очень полезными являются атрибуты colspanи rowspan. Первый показывает сколько ячеек надо объединить по горизонтали, а второй по вертикали. Следует заметить, что если мы применяем объединение ячеек, то общее число ячеек с учетом объединенных должно быть равным.
• 
  Слайд 47
  Правильное применение colspan: 100 300 400 500 600 Неправильное применение colspan: 100 200 300 400 500 600 Правильное применение rowspan: 100 200 300 500 600 Неправильное применение rowspan: 100 200 300 400 500 600
• 
  Слайд 48

  Блок

  Элемент

  является блочным элементом и предназначен для выделения фрагмента документа с целью изменения вида содержимого. Как правило, вид блока управляется с помощью стилей. Чтобы не описывать каждый раз стиль внутри тега, можно выделить стиль во внешнюю таблицу стилей, а для тега добавить атрибут class или id с именем селектора (более подробно при изучении CSS)
• 
  Слайд 49

  Формы HTML

  Формы HTML предназначены для организации взаимодействия с пользователем. Они позволяют вводить текст, осуществлять выбор из предложенных значений при помощи списков или кнопок. С помощью форм можно организовать интерактивный обмен информацией между Web-страницей и сервером. Можно определить формы как электронные бланки для заполнения различных данных таких как, например, имя, возраст, выбор страны проживания и других. Как правило, форма работает совместно с установленным на сервере сценарным приложением, обрабатывающим введенную информацию.

• 
  Слайд 50
  
• 
  Слайд 51

  Структура формы

  Элементы формы или тело формы Элементы формы или тело формы Упрощенная запись
• 
  Слайд 52

  Поле ввода

• 
  Слайд 53

  Кнопка

• 
  Слайд 54

  Кнопка с рисунком

• 
  Слайд 55

  Поле для ввода пароля

• 
  Слайд 56

  Переключатель (Radiobutton)

  Текст для переключателя
• 
  Слайд 57

  Флаг (checkbox)

  Текст флага
• 
  Слайд 58

  Скрытое поле

• 
  Слайд 59

  Список

  Отображаемая строка 1 … Отображаемая строка N
• 
  Слайд 60

  Поле для ввода многострочного текста (TextArea)

  ТЕКСТ ЭЛЕМЕНТА
• 
  Слайд 61

  Вставка изображений

  Изображение:

  Изображение из другой папки:

  Изображение с сайта cspu.ru:

• 
  Слайд 62

  Графические форматы

  JPEG – Joint Photographic Experts Group Формат JPEG был разработан для передачи фотографий между различными платформами. Благодаря поддержке 24-битовой цветовой палитры (миллионы цветов) формат JPEG получил широкое распространение для отображения иллюстраций высокого качества. При этом применяемый в JPEG алгоритм сжатия позволяет варьировать размер загружаемого файла в зависимости от требуемого качества отображения иллюстрации. Кроме того, формат JPEG поддерживает опцию "прогрессивный" JPEG, которая во многом похожа со свойством чередования строк формата GIF, но реализована на совершенно других принципах. В файл JPEG записывается несколько иллюстраций полного размера, но различного уровня качества. Сначала отображается рисунок низкого качества (и, соответственно, малого объема), затем догружаются все более качественные изображения. При этом общий объем загружаемого файла возрастает несущественно по сравнению с оригинальным JPEG.

• 
  Слайд 63
  

  PNG – Portable Network Graphics В последнее время все большее распространение получает формат PNG, который был разработан для сетевых иллюстраций с целью заменить форматы JPEG и GIF и объединивший в себе все их преимущества. Формат PNG поддерживает 24-, 32- и 48-битовую цветовую палитру, 8- и 16- битовую палитру серого, 8-битовую пользовательскую палитру. Реализованный в PNG алгоритм сжатия позволяет сжимать изображения лучше чем GIF (от 5 до 25%). Для него реализован механизм черезстрочного вывода первого изображения с использованием двумерной чересстрочности, что позволяет обеспечить минимальные затраты времени на вывод первого изображения. Кроме того, в PNG реализован эффективный механизм контроля целостности файла, позволяющего обнаружить ошибки при передаче по сети. Хотя PNG и поддерживает прозрачность, такие изображения некорректно отображаются в некоторых версиях MS InternetExplorer, поэтому если вы хотите, чтобы во всех браузерах рисунок с прозрачным фоном отображался корректно, лучше использовать формат GIF.

• 
  Слайд 64
  
• 
  Слайд 65

  Выравнивание изображений

  Для выравнивания изображений используется атрибут align. align=top – изображение выравнивается по верхнему краю текущей текстовой строки, не меняя позиции по горизонтали. При этом речь идет как о тексте, так и о графике; align=middle – изображение центрируется по вертикали на базовой линии текущей текстовой строки, не меняя позицию по горизонтали; align=bottom– нижний край изображения выравнивается по горизонтали на базовой линии текущей текстовой строки; align=left– изображение смещается к левому краю рабочей зоны, последующий текст сразу же начинает "обтекать" графику; align=right– то же что и для left, только изображение смещается к правой части рабочей зоны.

• 
  Слайд 66
  

  Изображение выравнено по верху при помощи align="top"

  Значение "middle" атрибута align центрирует изображение по вертикали

  Выравнивание изображения по нижнему краю (align="bottom") используется по умолчанию (можно сравнить с предыдущим примером).

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

  Изображение прижато к правому краю рабочей области (align="right"). Текст занимает все свободное пространство слева от изображения обтекая его.

• 
  Слайд 67
  

  Кроме того, для форматирования изображений внутри текста используются атрибуты hspaceи vspace, которые определяют интервал между графическим изображением и обтекающим текстом по горизонтали и вертикали соответственно. Размер отступов задается в пикселях.

• 
  Слайд 68
  

  Изображение в HTML может быть обрамлено прямоугольной рамкой. Для этого используется атрибут border, который задает ширину рамки вокруг изображения в пикселях.

  В данном варианте толщина рамки установлена в 5 пикселей.

• 
  Слайд 69
  

  В последнее время атрибут border = 0 при разработке Web-сайтов в подавляющем большинстве случаев используется именно для отмены рамки вокруг изображения-гиперссылки.

• 
  Слайд 70

  Размеры изображений

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

• 
  Слайд 71

  Атрибут Alt

  В ряде случаев графическое изображение на Web-странице не может быть отражено. Это может происходить при просмотре страниц с использованием текстовых браузеров, при запрете на отображение графики в целях увеличения скорости загрузки и снижения расходов на Интернет, а также в ряде других случаев. При этом смысл страницы может быть существенно искажен, а при использовании графических меню и кнопок навигация по сайту будет значительна затруднена. Во избежание этого в HTML используется атрибут alt, который задает цепочку символов (максимальная длина 1024 символа), отображаемую в браузере вместо изображения и в произвольной форме описывающую его (заменяющий текст).

• 
  Слайд 72
  Для демонстрации работы атрибута alt необходимо в свойствах обозревателя запретить использование графики на странице. Обратите внимание, что даже при отображенной графике замещающий текст появляется на экране при наведении указателя мыши на изображение. Благодаря этому атрибут alt можно использовать и в качестве своеобразной подписи к рисунку.
• 
  Слайд 73

  Карты изображений

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

• 
  Слайд 74
  

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

• 
  Слайд 75
  

  Автономные (обрабатываемые браузером) карты изображений описываются с помощью атрибута usemapтега : Где "figure_1.png" - имя файла, содержащего изображение, "#coordinates" - ссылка на часть HTML-документа, описывающего координатные области. Координатные области карты изображений определяются при помощи тегов и .

• 
  Слайд 76
  

  Тег описывает координаты отдельной области изображения, параметры которой и адрес гиперссылки задаются при помощи атрибутов shape, coordsи href. Атрибут shape определяет форму области-ссылки. По умолчанию ему присваивается значение shape="rect"- прямоугольник. Также область может быть описана в форме окружности ( shape="circle" ) или многоугольника ( shape="poly" ). Атрибут coords определяет размеры области. В зависимости от типа размечаемой области может меняться значение этого атрибута. Так для shape="rect" указываются две пары координат (левого верхнего и правого нижнего угла прямоугольника) в пикселях. Для shape="circle"указываются координаты центра окружности и ее радиус, а для shape="poly"последовательно указываются координаты вершин многоугольника. Атрибут hrefзадает URL-адрес ссылки для перехода в случае щелчка мышью на выбранной области.

• 
  Слайд 77
  

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

• 
  Слайд 78

  Создание графических меню