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

Содержание

• 
  Слайд 1

  HTML & WEB

  HyperText Markup Language

• 
  Слайд 2

  Теги

  Html – HyperText Markup Language – язык разметки гипертекста. HTML не является языком программирования, он предназначен для разметки текстовых документов. То, как будут выглядеть картинки, текст, таблицы и другие элементы на странице, и как они будут располагаться относительно друг друга, определяют метки (теги – от англ. tag). Тег HTML состоит из следующих друг за другом в определенном порядке элементов: левой угловой скобки “ “ (такой же, как символ "больше чем"). Совокупность открывающего ()и закрывающего (…>) тегов – называется контейнером. Контейнер может содержать внутри себя другие теги. Например: …тег2>тег1>. Тег который мы открыли первым – закрывается последним.

• 
  Слайд 3

  Шаблон документа

  Существует множество простых и сложных программ для написания страниц HTML.Одной из таких программ является стандартный блокнот (Notepad). Найти блокнот можно: Пуск (start) →Программы (programs) →Стандартные (accessories) →Блокнот (notepad). Написание страниц принято начинать с более или менее универсального шаблона:

  Шаблон Это шаблон web – странички.
• 
  Слайд 4
  

  1. Выбрать файл → Сохранить как (File →Save as) 2.Выбираем куда сохранить 3.Вводим имя документа. Например: index.html

• 
  Слайд 5
  

  Если вы уже сохранили документ страничку html, то при внесении изменений в этот документ вы можете уже сохранять их через Файл → Сохранить (File →Save)

• 
  Слайд 6
  

  Откроем браузер, допустим Internet Explorer и откроем в браузере наш документ. Для этого: Выбираем Файл (File) → Открыть (Open) Выбираем файл Нажимаем «ОК»

• 
  Слайд 7
  

  !Итак, все, что находится между и …> - это тег. Текст, не находящийся между такими скобками весь виден при просмотре в браузере! Шаблон открывается тегом - это самый главный из тегов. Он должен всегда открывать ваш документ, также как тег должен непременно стоять в последней его строке. Эти теги обозначают, что находящиеся между ними строки представляют именно единый HTML документ, а не какой-то другой файл. Контейнер

  … - это голова документа. Все теги, расположенные внутри данного контейнера – это что-то вроде служебной информации. Элементы, находящиеся внутри контейнера head (кроме названия документа, записываемого с помощью контейнера title), не видны на экране, во всяком случае, напрямую. Внутри данного контейнера могут находиться следующие элементы: … … …
• 
  Слайд 8
  

  Между тегами

  … записывается название документа и представляет собой текстовую строку. Название появляется в заголовке окна браузера.
• 
  Слайд 9
  

  В заголовок добавлен еще один функциональный тег, тег Этот элемент определяет для документа набор свойств, которые задаются в виде свойства/значение. В качестве этих свойств могут выступать: имя автора, список ключевых слов, кодировка страницы и многие другие. Все свойства задаются в виде значения атрибута name, либо http-equiv, а далее в content значение этих свойств. Значения атрибута name: author - Определяет имя автора документа. Синтаксис: generator - Этот параметр очень любят редакторы Html документов, и просто выдают ваше неумение все сделать ручками. Синтаксис: keywords- задает ключевые слова для поиска страницы. Синтаксис:

• 
  Слайд 10
  

  description-Задает краткое описание Вашей страницы. Синтаксис: content-type - этот параметр описывает тип содержания документа и кодировку в которой он сделан. Синтаксис: Слова text/html - это тип содержания документа, т.е. это есть текст в формате HTML. Далее charset - это кодировка символов, она может принимать следующие значения: windows-1251, koi8-r, ISO-8859-1 и т.д. Ещё одним из важных параметров является параметр refresh. Синтаксис: Браузеры поймут эту строку как инструкцию ожидать 60 секунд, а затем загрузить документ, находящийся по адресу, указанному в URL.

• 
  Слайд 11
  

  Элемент предназначен для указания типа текущего документа — DTD (document type definition, описание типа документа). Это необходимо, чтобы браузер понимал, как следует интерпретировать текущую веб-страницу, поскольку HTML существует в нескольких версиях, кроме того, имеется XHTML (EXtensible HyperText Markup Language, расширенный язык разметки гипертекста), похожий на HTML, но различающийся с ним по синтаксису. Чтобы браузер «не путался» и понимал, согласно какому стандарту отображать веб-страницу и необходимо в первой строке кода задавать . Существует несколько видов , они различаются в зависимости от версии языка, на которого ориентированы.

• 
  Слайд 12
  
• 
  Слайд 13
  

  Синтаксис Элемент верхнего уровня] [Публичность] "[Регистрация]//[Организация]//[Тип] [Имя]//[Язык]" "[URL]"> Параметры Элемент верхнего уровня — указывает элемент верхнего уровня в документе, для HTML это тег . Публичность — объект является публичным (значение PUBLIC) или системным ресурсом (значение SYSTEM), например, таким как локальный файл. Для HTML/XHTML указывается значение PUBLIC. Регистрация — сообщает, что разработчик DTD зарегистрирован в международной организации по стандартизации (International Organization for Standardization, ISO). Принимает одно из двух значений: плюс (+) — разработчик зарегистрирован в ISO и - (минус) — разработчик не зарегистрирован. Для W3C значение ставится «-». Организация — уникальное название организации, разработавшей DTD. Официально HTML/XHTML публикует W3C, это название и пишется в . Тип — тип описываемого документа. Для HTML/XHTML значение указывается DTD. Имя — уникальное имя документа для описания DTD. Язык — язык, на котором написан текст для описания объекта. Содержит две буквы, пишется в верхнем регистре. Для документа HTML/XHTML указывается английский язык (EN). URL — адрес документа с DTD.

• 
  Слайд 14

  Шаблон документа

  После контейнера head идет контейнер body. В этот контейнер помещают содержимое страницы. Кроме того он может установить очень много параметров страницы с помощью своих атрибутов. bgcolor устанавливает цвет фона документа. text устанавливает цвет отображаемых символов. link Это цвет, которым будут отображаться ссылки на другие документы. vlink Этим цветом выделяются уже посещенные ссылки (Visited LINKs). alink Этот цвет для того, чтобы помечать ссылки активные в данный момент (Active Link).

• 
  Слайд 15
  

  background Этот параметр задает фоновое изображение. bgproperties Если установлено значение fixed, фоновое изображение не прокручивается. leftmargin Устанавливает границу левого поля в пикселях. topmargin Устанавливает границу верхнего поля в пикселях. rightmargin Устанавливает границу правого поля в пикселях. bottommargin Устанавливает границу нижнего поля в пикселях. Пример группирования:

• 
  Слайд 16
  

  Цвет во всех этих параметрах задается в следующем формате: #RRGGBB где R (red - красный), G (green - зеленый), B (blue - синий)- это составляющие компоненты цвета в шестнадцатеричной форме. Для простоты в HTML определены 16 стандартных цветов.

• 
  Слайд 17
  
• 
  Слайд 18
  
• 
  Слайд 19
  
• 
  Слайд 20

  Цветовое оформление

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

• 
  Слайд 21

  Форматирование текста

  HTML предполагает, что автор документа ничего не знает о компьютере своего читателя. Читатель вправе установить любой размер окна и пользоваться любым из имеющихся у него шрифтов. Это означает, что место переноса в строке определяется только программой просмотра и установками конечного пользователя. Символы перевода строки оригинального документа игнорируются, в результате чего текст, отлично смотревшийся в окне вашего редактора, может превратиться в сплошной неудобочитаемый текст в окне программы просмотра.

• 
  Слайд 22
  

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

  в начало каждого нового абзаца вашего текста, и программа просмотра отделит абзацы друг от друга пустой строкой.

• 
  Слайд 23
  

  В HTML несколько стоящих подряд тегов

  не дают дополнительного пространства между абзацами. Тег абзаца имеет один атрибут, поддерживаемый браузерами Netscape Navigator и Microsoft Internet Explorer. Это атрибут align, имеющий следующие значения: leftвыравнивает абзац по левой границе окна браузера centerвыравнивает абзац по центру rightвыравнивает абзац по правой границе окна браузера Синтаксис:

  …

  Каждый последующий абзац игнорирует, заданное для предыдущего абзаца значение align.
• 
  Слайд 24

  Форматированиетекста

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

• 
  Слайд 25

  Структурирование текста

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

  ) и закрывающий () теги. HTML располагает шестью уровнями заголовков: h1 (самый верхний), h2, h3, h4, h5 и h6 (самый нижний). Элемент "заголовок" предполагает автоматическую вставку пустых строк до и после него. У заголовка есть два атрибута: align и title – задает всплывающую подсказку. Синтаксис: … где n=1,2,3,…,6
• 
  Слайд 26
  Пример Заголовок первого уровня Заголовок второго уровня … … … Заголовок шестого уровня
• 
  Слайд 27
  

  Другим методом разделения документа на части является проведение горизонтальных линий. Они визуально подчеркивают законченность той или иной области страницы. Элемент

  позволяет провести горизонтальную линию в окне большинства программ просмотра. Тег имеет следующие атрибуты: align– выравнивает горизонтальную линию. Имеет следующие значения: left – выравнивает по левому краю right – по правому center – по центру width – устанавливает длину линии в пикселях или процентах от ширины окна браузера (в этом случае добавляется символ %) size – устанавливает толщину линии в пикселях noshade – отменяет тень линии color – указывает цвет линии Синтаксис:
• 
  Слайд 28

  Логическое форматирование

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

• 
  Слайд 29

  Физическое форматирование

  Последней "инстанцией" определения внешнего вида вашего документа, как отмечалось уже неоднократно, является программа просмотра читателя. Вы имеете ограниченные возможности повлиять на этот процесс с помощью элементов физического форматирования: Выделяет текст полужирным шрифтом. Выделяет текст курсивом. Выводит текст шрифтом фиксированной ширины. Элемент подчёркивания. Элемент зачеркивания. Отображается текст, перечеркнутый горизонтальной линией. Выводит текст шрифтом большего размера. Выводит текст шрифтом меньшего размера. Сдвигает текст ниже уровня строки и выводит его (если возможно) шрифтом меньшего размера. Сдвигает текст выше уровня строки и выводит его (если возможно) шрифтом меньшего размера.

• 
  Слайд 30
  

  Задание вывести следующую формулу Физическое форматирование

• 
  Слайд 31

  Адресация

  Адрес Абсолютный Требует указания полного пути к вашему ресурсу. Протокол://домен или IP адрес/путь к файловой системе/ имя файла На компьютере: Диск://путь/имя файла Относительный При записи таких адресов есть два правила: Имя каталога/ - переход на один уровень вниз ../ - переход на один уровень вверх Если картинка находится в той же папке, что и страница (файл из которого ее вызывают), то можно прописать только имя файла

• 
  Слайд 32
  

  относительный адрес: ../../fon/pic/pic.jpg абсолютный адрес(IE): С://home/fon/pic/pic.jpg Во всех браузерах file://С:/home/fon/pic/pic.jpg pic.jpg index.html

• 
  Слайд 33
  

  Изображения в Интернете бывают разных форматов. Самыми признанными и распространенными среди них являются GIF, JPEG. Формат GIF позволяет создавать анимированные картинки. Этот формат является сжатым, и допустимое количество цветов в нем 256. Сжатие происходит без потерь, т.е. изображение записывается без каких-либо преобразований. Формат JPEG также является сжатым, и применяется для изображений требующих большое количество цветов вплоть до 16 млн. Сжатие происходит после оптимизации и поэтому происходят потери в качестве. Размер файла сильно зависит от требуемого качества изображения, которое может иметь около 12 уровней качества (от очень плохого до наилучшего). В Интернете сейчас начинают применять новый стандарт PNG, но он пока мало распространен. Он позволяет создавать изображения в 16 млн. цветов без потери в качестве. Но из-за этого занимает намного больше места, чем JPEG. Форматы изображений

• 
  Слайд 34
  

  Для того, чтобы вставить в документ изображение необходимо воспользоваться тэгом совместно с атрибутом src, поместив их в нужное место вашего HTML-документа. Синтаксис: По умолчанию браузер выводит изображение немедленно после текста или другого объекта, описанного предыдущими инструкциями. Помимо атрибута src тег имеет следующие атрибуты: alt -Этот атрибут задает текст, который будет изображаться вместо картинки, если она не загрузилась или не отображается. Как правило в тексте указывается краткое описание изображения. Вставка графики

• 
  Слайд 35
  

  align Задает расположение рисунка в окне браузера и его выравнивание относительно текущей строки. Имеет следующие значения: top - Выравнивает верхний край изображения по верхнему краю текущей строки. middle Выравнивает центр изображения по базовой линии текущей строки. Вставка графики

• 
  Слайд 36
  

  bottom Установка по умолчанию. Выравнивает нижний край изображения по базовой линии текущей строки. left Выравнивает изображение по левому краю окна браузера. rightВыравнивает изображение по правому краю окна браузера. width - задает ширину области в пикселях, отводимой в окне под изображение. height -задает высоту области в пикселях, отводимой в окне под изображение. Вставка графики

• 
  Слайд 37
  

  hspaceИспользуется для указания ширины пространства слева и справа от изображения в пикселях. vspace Используется для указания ширины пространства сверху и снизу от изображения в пикселях. Как правило по умолчанию равно 0. Но может быть и иным. border Задает толщину рамки, которой будет обрисовываться изображение. Если изображение не является ссылкой, то оно по умолчанию не окружается рамкой. Если же это изображение-ссылка, то толщина рамки будет равна 2. Рамка иногда может портить стиль вашей страницы, тогда используйте border=0. Вставка графики

• 
  Слайд 38
  
• 
  Слайд 39
  

  Шрифт Comic Sans MS размер шрифта 6

  Шрифт Arial пробелов между текстом и картинкой нет

• 
  Слайд 40
  

  Шрифт Times New Roman картинка растянута по ширине

  ШрифтTimes New Roman Очень интересный эффект

• 
  Слайд 41
  

  Гиперссылки являются основным элементом HTML, позволяющим связывать отдельные страницы в единое электронное издание. Гиперссылка состоит из двух частей. Первая из них – это то, что вы видите на WEB-странице; она называется указатель (anchor). Вторая часть, дающая инструкцию браузеру, называется адресной частью ссылки (URL-адресом, URL reference). Когда вы щелкаете мышью по указателю ссылки, браузер загружает документ, адрес которого определяется URL-aдpecoм. Составные части ссылки рассмотрены ниже. Кодируется гиперссылка с помощью тега : Синтаксис: Указатель УКАЗАТЕЛИ: Указателем ссылки может быть слово, группа слов или изображение. Текстовый указатель как правило представляется браузером синим цветом и подчеркивается. Графический указатель не подчеркиваются и не выделяется цветом, но вокруг него можно сделать рамку. Для того, чтобы задать графический указатель, надо вместо текста между тегами … вставить нужное изображение с помощью тега . Гиперссылки

• 
  Слайд 42
  

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

• 
  Слайд 43
  Ссылка Гиперссылки
• 
  Слайд 44
  

  Для построения внутренней ссылки сначала нужно создать якорь, показывающий место назначения. Например, если вы хотите сделать ссылку на текст в середине документа, нужно разместить там якорь и дать ему имя при помощи атрибута nameтэга . При этом атрибут href не используется, и браузер не выделяет содержимое тэга . После того как якорь получил имя, можно приступить к созданию ссылки на него. Для этого, вместо указания в атрибуте href адреса документа, как это делалось ранее, поместим туда имя якоря со специальным префиксом (#), говорящим о том, что это внутренняя ссылка. Гиперссылки

• 
  Слайд 45
  

  Пример: Глава 1 Глава 2 Какой-то текст какой-то текст Какой-то текст Гиперссылки

• 
  Слайд 46
  

  Создание ссылки на электронную почту так же просто, как и на другую страницу. Вместо http, определяющего Web-адрес, нужно ввести адрес электронной почты после слова mailto: Send me E-mail. Эта ссылка ничем не будет отличаться от остальных гипертекстовых ссылок вашего документа. Гиперссылки

• 
  Слайд 47
  

  В HTML список состоит из тега-контейнера списка, определяющего его тип, и стандартных тегов

• , предваряющих каждый пункт списка. Упорядоченный список используется для нумерованного перечисления отдельных пунктов или указания последовательности каких-то действий. Когда программа просмотра встречает тег упорядоченного списка, она последовательно нумерует пункты списка: 1, 2, 3 и т.д. Упорядоченный список открывается тегом
  , а каждый его пункт начинается стандартным тегом
  1. . Для создания заголовка списка используется специальный тег . Список закрывается тегом
  . Открывающий и закрывающий тэги обеспечивают перевод строки до и после списка, отделяя таким образом список от остального текста, поэтому здесь нет необходимости использовать теги абзаца

  . Упорядоченные списки допускают вложения друг в друга. Списки в HTML