определений.
Создание таблицы.
Параметры тега
.
Параметры тега . Особенности таблиц
Слайд 7 ![21.04.2012 Таблицы Выравнивание таблиц. Объединение ячеек. Вложенные таблицы. Заголовок таблицы. Фреймы](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1307140/slide-6.jpg)
21.04.2012
Таблицы
Выравнивание таблиц. Объединение ячеек. Вложенные таблицы. Заголовок таблицы.
Фреймы
Достоинства и недостатки фреймов. Создание фреймов.
Ссылки во фреймах. Границы между фреймами. Изменение размеров фреймов. Полосы прокрутки. Плавающие фреймы.
Слайд 8 ![RFC 1866 — HTML 2.0, одобренный как стандарт 22 сентября 1995](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1307140/slide-7.jpg)
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 — в разработке. Request For Comments Версии HTML
21.04.2012
Слайд 9 ![Официальной спецификации HTML 1.0 не существует. До 1995 года существовало множество](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1307140/slide-8.jpg)
Официальной спецификации HTML 1.0 не существует. До 1995 года существовало множество
неофициальных стандартов HTML. Чтобы стандартная версия отличалась от них, ей сразу присвоили второй номер. Версия 3 была предложена Консорциумом всемирной паутины (W3C) в марте 1995 года и обеспечивала много новых возможностей, таких как создание таблиц, «обтекание» изображений текстом и отображение сложных математических формул. Этот стандарт был совместим с версией 2.0, но его реализация была сложна для браузеров того времени. Версия 3.1 официально никогда не предлагалась, и следующей версией стандарта HTML стала 3.2, в которой были опущены многие нововведения версии 3.0, но добавлены нестандартные элементы, поддерживаемые браузерами «Netscape» и «Mosaic». Версии HTML
21.04.2012
Слайд 10 ![HTML — это не язык программирования в общепринятом смысле, а язык](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1307140/slide-9.jpg)
HTML — это не язык программирования в общепринятом смысле, а язык
гипертекстовой разметки документа. С его помощью на Web-странице можно разместить текст, графические изображения, звуковые и видеофайлы - практически любую электронную информацию. Текст на языке HTML интерпретируется браузером и отображается в виде документа, в удобной для человека форме. С помощью HTML должным образом форматируют Web-страницы и устанавливают между ними связь. При этом не имеет значения, на какой из компьютерных платформ созданы файлы, которые использованы на Web-страницах. 21.04.2012
Слайд 11 ![Появление гипертекста 21.04.2012 В середине 1960-х Тед Нельсон создал слово "гипертекст"](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1307140/slide-10.jpg)
Появление гипертекста
21.04.2012
В середине 1960-х Тед Нельсон создал слово "гипертекст" для описания
системы непоследовательных ссылок внутри текста. Идея состояла в том, чтобы перемещаться по текстовым ссылкам, не читая при этом материал в линейной последовательности. Фрагмент информации в одном месте будет вести к родственной информации в другом месте через цепочку ссылок, чтобы собрать сведения из различных источников, разбросанных по множеству документов.
Слайд 12 ![Появление гипертекста 21.04.2012 И только пятнадцать лет спустя Тим Бернерс-Ли, работавший](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1307140/slide-11.jpg)
Появление гипертекста
21.04.2012
И только пятнадцать лет спустя Тим Бернерс-Ли, работавший консультантом в
Европейском центре ядерных исследований (CERN), написал программу с названием "Enquire-Within-Upon-Everything" ("Задай любой вопрос"), которая позволяла создавать ссылки между произвольными узлами текста в документе. Каждый узел имел заглавие-идентификатор и список двунаправленных ссылок, поэтому читатели могли перемещаться из одного раздела документа в другой, активируя текстовые ссылки.
Слайд 13 ![В 1990 Бернерс-Ли начал работу над гипертекстовым "браузером". Он придумал термин](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1307140/slide-12.jpg)
В 1990 Бернерс-Ли начал работу над гипертекстовым "браузером". Он придумал термин
"WorldWideWeb" ("Всемирная паутина") для названия программы и "World Wide Web" - для названия проекта. Проект WWW был первоначально разработан для создания распределенной гипермедийной системы, которая была легко доступна из любого настольного компьютера, и для согласования физических исследований, разбросанных по всему миру. Web содержала стандартные форматы для текста, графики, звука и видео, которые легко индексировались и были доступны для поиска всем сетевым машинам. 21.04.2012
Слайд 14 ![Были предложены стандарты для: Единообразного локатора ресурса (URL - Uniform Resource](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1307140/slide-13.jpg)
Были предложены стандарты для: Единообразного локатора ресурса (URL - Uniform Resource
Locator). Он является схемой адресации Web. Протокола передачи гипертекста (HTTP - HyperText Transfer Protocol). Он является множеством сетевых правил для передачи Web-страниц. Языка разметки гипертекста (HTML - HyperText Markup Language.
21.04.2012
Слайд 15 ![Внешний вид HTML документа (например, заголовок, тело документа и колонтитул) определяется](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1307140/slide-14.jpg)
Внешний вид HTML документа (например, заголовок, тело документа и колонтитул) определяется
специальными его элементами, которые должным образом интерпретирует Web-браузер. Эти элементы стандартизированы Консорциумом World Wide Web (World Wide Web Consortium — W3C) и называются дескрипторами (или тегами). Дескрипторы (теги) — это элементы, которыми определяются внешний вид и "поведение" Web-страницы. Как правило, внешний вид и расположение элементов Web-страницы (текст, изображение и т.д.) определяются парой дескрипторов, между которыми находятся эти элементы. 21.04.2012
Слайд 16 ![Размещение файлов Web-страниц Для создания файлов Web-страниц можно использовать простейший текстовый](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1307140/slide-15.jpg)
Размещение файлов Web-страниц
Для создания файлов Web-страниц можно использовать простейший текстовый редактор.
Но существуют и специализированные средства. Среди них Smart Web Builder - html-редактор с удобным интерфейсом и широкими возможностями (http://www.softportal.com/software-4614-smart-web-builder.html). Чтобы другие пользователи Internet могли по оценить ваши Web-страницы, файлы этих страниц необходимо разместить на Web-сервере. Место на нем, и подключение к Internet обеспечивают Internet-провайдеры (JSP — Internet Service Provider). Есть и другие организации, которые могут предоставить услуги по хранению Ваших Web-страниц на сервере. Они называются Web Presence Provider (WPP). 21.04.2012
Слайд 17 ![Основные элементы HTML HTML и XHTML — это языки гипертекстовой разметки,](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1307140/slide-16.jpg)
Основные элементы HTML
HTML и XHTML — это языки гипертекстовой разметки,
которыми определяется структура текстовых элементов документа; HTML— язык, не зависящий от типа компьютерной платформы. Независимо от компьютерной платформы — будь то PC, Macintosh или UNIX,— если воспользоваться только Web-браузером, для посетителей вашего Web-узла страницы будут отображаться одинаково; XHTML— это последняя и более структурированная версия HTML. 21.04.2012
Слайд 18 ![Основные элементы HTML HTML — это язык макетирования документов и описания](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1307140/slide-17.jpg)
Основные элементы HTML
HTML — это язык макетирования документов и описания
гиперссылок. Однако он не соответствует строгому стандарту XML. Поэтому W3С предложил язык XHTML, переработав HTML в соответствии с требованиями XML. XHTML поддерживает все возможности HTML, применяя более жесткие правила XML. Создавать XHTML-документы ничуть не сложнее чем писать обычную HTML-разметку, а перспективы использования таких документов значительно шире, поскольку к ним оказывается применим весь инструментарий XML. Поэтому в последнее время наибольшее внимание уделяется именно XHTML, как приоритетному инструменту разметки гипертекста. 21.04.2012
Слайд 19 ![Инструментарий 21.04.2012 Текстовый редактор HTML-документ можно создавать в любом текстовом редакторе,](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1307140/slide-18.jpg)
Инструментарий
21.04.2012
Текстовый редактор HTML-документ можно создавать в любом текстовом редакторе, хоть Блокноте, но
для этой цели подойдет не всякая программа. Нужна такая, чтобы поддерживала следующие возможности: подсветка синтаксиса — выделение тегов, текста, ключевых слов и параметров разными цветами. Это облегчает поиск нужного элемента, ускоряет работу разработчика и снижает возникновение ошибок; работа с вкладками. Сайт представляет собой набор файлов, которые приходится править по отдельности, для чего нужен редактор, умеющий одновременно работать сразу с несколькими документами. При этом файлы удобно открывать в отдельных вкладках, чтобы быстро переходить к нужному документу; проверка текущего документа на ошибки . .
Слайд 20 ![Инструментарий 21.04.2012 Браузер Браузер это программа, предназначенная для просмотра веб-страниц. Вначале](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1307140/slide-19.jpg)
Инструментарий
21.04.2012
Браузер Браузер это программа, предназначенная для просмотра веб-страниц. Вначале подойдет любой браузер,
но с повышением опыта и знаний потребуется завести несколько, чтобы проверять правильность отображения сайта в разных браузерах. Каждый браузер имеет свои уникальные особенности, поэтому для проверки универсальности кода требуется просматривать и корректировать код с их учетом. На сегодняшний день наибольшей популярностью пользуются три браузера: Firefox, Internet Explorer и Opera. Графический редактор Графический редактор необходим для обработки изображений и их подготовки для публикации на веб-странице. Самой популярной программой такого рода является Photoshop. Но зачастую лучше воспользоваться чем-нибудь более простым. Так, программа Paint.Net позволяет сделать все необходимые манипуляции с изображениями, вдобавок бесплатна для использования.
Слайд 21 ![Теги 21.04.2012 Чтобы браузер при отображении документа понимал, что имеет дело](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1307140/slide-20.jpg)
Теги
21.04.2012
Чтобы браузер при отображении документа понимал, что имеет дело не с
простым текстом, а с элементом форматирования и применяются теги. Общий синтаксис написания тегов следующий. <тег параметр1="значение" параметр2="значение"> <тег параметр1="значение" параметр2="значение">...тег> Видно, что теги бывают двух типов — одиночные и парные (контейнеры). Одиночный тег используется самостоятельно, а парный может включать внутри себя другие теги или текст. Теги имеют различные параметры. Они , разделяются между собой пробелом. Бывают теги без дополнительных параметров. Условно их можно подразделить на обязательные, они непременно должны присутствовать, и необязательные, их добавление зависит от цели применения тега.
Слайд 22 ![Теги 21.04.2012 Пример текста Здесь используется одиночный тег . Парных тегов](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1307140/slide-21.jpg)
Теги
21.04.2012
content="text/html; charset= windows -1251"> Пример текста Здесь используется одиночный тег . Парных тегов несколько: , , , и .
Парные теги, еще называют контейнерами.
Слайд 23 ![Правила применения тегов 21.04.2012 Парные теги состоят из двух частей —](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1307140/slide-22.jpg)
Правила применения тегов
21.04.2012
Парные теги состоят из двух частей — открывающий и закрывающий
тег. Открывающий тег обозначается как и одиночный — <тег>. В закрывающем используется слэш — тег>. Можно вкладывать в контейнер другие теги, но следует соблюдать их порядок. Согласно спецификации HTML все значения параметров тегов следует указывать в двойных ("пример") или одинарных кавычках ('пример'). Отсутствие кавычек не приведет к ошибкам, браузеры во многих случаях достаточно корректно обрабатывают код и без кавычек. Любые теги, и их параметры нечувствительны к регистру. Можно писать — , или . Рекомендуется придерживаться выбранной формы записи на протяжении всех страниц сайта.
Слайд 24 ![Значения параметров тегов 21.04.2012 Если для тега не добавлен какой-либо допустимый](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1307140/slide-23.jpg)
Значения параметров тегов
21.04.2012
Если для тега не добавлен какой-либо допустимый параметр, это
означает, что в этом случае браузер будет подставлять значение, заданное по умолчанию. Если вы ожидали получить иной результат на веб-странице, проверьте, м.б. вы не указали значения некоторых параметров. Иногда используются некоторые параметры у тегов, без присваивания им никакого значения. Порядок параметров в теге не имеет значения и на результат отображения элемента не влияет. Теги вида ![](/images/title.gif) и по своему действию равны. Каждый параметр тега относится к определенному типу (текст, число, путь к файлу и др.). Это нужно учитывать при написании параметра.. Слайд 25 ![Структура html-документа Назв. Текст документа! Автор документа 21.04.2012](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1307140/slide-24.jpg)
Структура html-документа
Назв. Текст документа! Автор документа
21.04.2012
Слайд 26 ![Шаблон базового документа Здесь будет основной текст страницы! Текст набрал Ю.Молородов](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1307140/slide-25.jpg)
документа Здесь будет основной текст страницы! Текст набрал Ю.Молородов 22 апреля 2010 г. Структура html-документа
21.04.2012
Слайд 27 ![Элемент используется для указания типа текущего документа — DTD (document type](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1307140/slide-26.jpg)
Элемент используется для указания типа текущего документа — DTD (document type
definition, описание типа документа). Это необходимо, чтобы браузер понимал, как следует интерпретировать текущую Веб-страницу. HTML существует в нескольких версиях. Также имеется XHTML (EXtensible HyperText Markup Language, расширенный язык разметки гипертекста), похожий на HTML, но различающийся с ним по синтаксису. Чтобы браузер «не путался» и понимал, согласно какому стандарту отображать Веб-страницу и необходимо в первой строке кода задавать . Структура html-документа
21.04.2012
Слайд 28 ![Замечание Часто можно встретить код HTML вообще без использования . Но](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1307140/slide-27.jpg)
Замечание Часто можно встретить код HTML вообще без использования . Но Веб-страница
все равно будет показана. Однако может получиться, что один и тот же документ отображается в браузере по-разному при использовании и без него. Кроме того, браузеры могут по-своему показывать такие документы, в итоге страница может отображаться совсем не так, как это хотел разработчик. Чтобы таких ситуаций не произошло, добавляйте в начало документа. Структура html-документа
21.04.2012
Слайд 29 ![В XHTML предусмотрены три разновидности дескриптора : strict, transitional и frameset.](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1307140/slide-28.jpg)
В XHTML предусмотрены три разновидности дескриптора : strict, transitional и frameset.
В любом случае декларировать этот дескриптор надлежит только в верхней части кода Web-страницы. Strict. Эту разновидность дескриптора следует использовать только в том случае, если ваши страницы предназначены для просмотра с помощью Web-браузеров последних версий, которые должным образом поддерживают таблицу стилей. Код дескриптора такого типа выглядит следующим образом: PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtmll-strict.dtd"> Структура html-документа
21.04.2012
Слайд 30 ![Transitional. Если вы не уверены, что доступ к вашим Web-страницам будет](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1307140/slide-29.jpg)
Transitional. Если вы не уверены, что доступ к вашим Web-страницам будет
осуществляться только с помощью браузеров последних версий, используйте разновидность transitional дескриптора . PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtmll-transitional.dtd"> Frameset. Тип frameset следует использовать для работы с фреймами. < DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "DTD/xhtmll-frameset.dtd"> Обратите внимание, что дескриптор набран прописными буквами. Прочие дескрипторы Web-страницы должны быть набраны строчными буквами Структура html-документа
21.04.2012
Слайд 31 ![Простейший html-документ 21.04.2012 title>Пример веб-страницы Заголовок Первый абзац. Второй абзац. Текст](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1307140/slide-30.jpg)
Простейший html-документ
21.04.2012
http-equiv="Content-Type" content="text/html; charset=windows-1251"> < title>Пример веб-страницы Заголовок Первый абзац. Второй абзац. Текст набрал Ю.Молородов 22 апреля 2010 г.
Слайд 32 ![Типы тегов (дискрипторов) Каждый тег HTML принадлежит к определенной группе тегов:](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1307140/slide-31.jpg)
Типы тегов (дискрипторов)
Каждый тег HTML принадлежит к определенной группе тегов: табличные
теги направлены на формирование таблиц и не могут применяться для других целей. Условно теги делятся на следующие типы: теги верхнего уровня; теги заголовка документа; блочные элементы; встроенные элементы; универсальные элементы; списки; таблицы. 21.04.2012
Слайд 33 ![Теги верхнего уровня 21.04.2012 С их помощью формируется структура Веб-страницы и](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1307140/slide-32.jpg)
Теги верхнего уровня
21.04.2012
С их помощью формируется структура Веб-страницы и определяются раздел
заголовка и тело документа.
Тег является контейнером, который заключает в себе всё содержимое веб-страницы, включая теги и . Открывающий и закрывающий теги в документе необязательны, но хороший стиль диктует непременное их использование.
Тег предназначен для хранения других элементов, цель которых — помочь браузеру в работе с данными. Внутри контейнера находятся метатеги, которые используются для хранения информации, предназначенной для браузеров и поисковых систем. Так, поисковые системы обращаются к метатегам чтобы найти описание сайта, ключевые слова и пр.
Слайд 34 ![Теги верхнего уровня 21.04.2012 Тег предназначен для хранения содержания Веб-страницы, отображаемого](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1307140/slide-33.jpg)
Теги верхнего уровня
21.04.2012
Тег предназначен для хранения содержания Веб-страницы, отображаемого в
окне браузера. Информацию, которую следует выводить в документе, следует располагать именно внутри контейнера . К такой информации относится текст, изображения, таблицы, списки и др. ... ... Здесь контейнер определяет «каркас» всей Веб-страницы. Вначале задается тег , затем идет контейнер , в нем хранится содержательная часть документа, которая и отображается в браузере. Теги и хотя и не относятся к обязательным тегам (их можно не размещать в коде), но стоит добавлять всегда. Это позволяет получить четкую и понятную структуру документа. Слайд 35 ![Теги заголовка документа 21.04.2012 К ним относятся элементы, которые располагаются в](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1307140/slide-34.jpg)
Теги заголовка документа
21.04.2012
К ним относятся элементы, которые располагаются в контейнере .
Эти теги не отображаются в окне браузера, за исключением тега , который определяет название Веб-страницы. Используется для отображения строки текста в левом верхнем углу окна браузера. Она сообщает пользователю название сайта и другую информацию разработчика. Метатеги используются для хранения информации, предназначенной для браузеров и поисковых систем. Например, механизмы поисковых систем обращаются к метатегам для получения описания сайта, ключевых слов и других данных. Тег всего один, он у него масса параметров, поэтому к нему и применяется множественное число.
Слайд 36 ![Блочные элементы 21.04.2012 Блочные элементы занимают всю доступную ширину, высота элемента](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1307140/slide-35.jpg)
Блочные элементы
21.04.2012
Блочные элементы занимают всю доступную ширину, высота элемента определяется его
содержимым, и он всегда начинается с новой строки. Предназначен для выделения длинных цитат внутри документа. Текст, обозначенный этим тегом, отображается как выровненный блок с отступами слева и справа (примерно по 40 пикселов), а также с пустым пространством сверху и снизу.
Тег относится к универсальным блочным контейнерам и применяется в тех случаях, где нужны блочные элементы без дополнительных свойств. С помощью тега можно выравнивать текст внутри этого контейнера с помощью параметра align.
... Эта группа тегов определяет текстовые заголовки разного уровня, которые показывают относительную важность секции, расположенной после заголовка.
Слайд 37 ![Блочные элементы 21.04.2012 Рисует горизонтальную линию, которая по своему виду зависит](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1307140/slide-36.jpg)
Блочные элементы
21.04.2012
Рисует горизонтальную линию, которая по своему виду зависит от используемых
параметров, а также браузера. Линия всегда начинается с новой строки, а после нее все элементы отображаются на следующей строке. Определяет параграф (абзац) текста.
Задает блок предварительно форматированного текста. Такой текст отображается обычно моноширинным шрифтом и со всеми пробелами между словами. В HTML любое количество пробелов идущих в коде подряд на Веб-странице показывается как один. Тег позволяет обойти эту особенность и отображать текст как требуется разработчику.
Слайд 38 ![Встроенные элементы 21.04.2012 Это элементы Веб-страницы, которые являются непосредственной частью другого](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1307140/slide-37.jpg)
Встроенные элементы
21.04.2012
Это элементы Веб-страницы, которые являются непосредственной частью другого элемента, например,
Слайд 39 ![Встроенные элементы 21.04.2012 Тег предназначен для акцентирования текста, отображая его курсивом.](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1307140/slide-38.jpg)
Встроенные элементы
21.04.2012
Тег предназначен для акцентирования текста, отображая его курсивом.
Слайд 40 ![Встроенные элементы 21.04.2012 Отображает шрифт в виде нижнего индекса. Текст при](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1307140/slide-39.jpg)
Встроенные элементы
21.04.2012
Отображает шрифт в виде нижнего индекса. Текст при этом
располагается ниже базовой линии остальных символов строки и уменьшенного размера — H2O. Отображает шрифт в виде верхнего индекса. По своему действию похож на , но текст отображается выше базовой линии текста — м2. Есть разница между блочными и встроенными элементами: Встроенные элементы могут содержать только данные или другие встроенные элементы. В блочные можно вкладывать другие блочные элементы, встроенные элементы, и данные. Т.е., встроенные элементы не могут хранить блочные элементы. Б.Э. занимают всю доступную ширину окна браузера. Ширина встроенных элементов равна их содержимому плюс значения отступов, полей и границ. Блочные элементы всегда начинаются с новой строки
Слайд 41 ![Универсальные элементы 21.04.2012 Их особенность в том, что они в зависимости](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1307140/slide-40.jpg)
Универсальные элементы
21.04.2012
Их особенность в том, что они в зависимости от контекста
могут использоваться как блочные или встроенные элементы.
Тег используется для выделения текста, который был удален в новой версии документа. Такое форматирование позволяет отследить, какие изменения в тексте документа были сделаны. Браузеры обычно помечают текст в контейнере как перечеркнутый.
Тег предназначен для акцентирования вновь добавленного текста и обычно применяется наряду с тегом . Браузеры помечают содержимое контейнера подчеркиванием текста.
Слайд 42 ![Теги списков 21.04.2012 Это взаимосвязанный набор отдельных фраз или предложений, начинающиеся](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1307140/slide-41.jpg)
Теги списков
21.04.2012
Это взаимосвязанный набор отдельных фраз или предложений, начинающиеся с маркера
или цифры. Они предоставляют возможность упорядочить и систематизировать разные данные и представить их в наглядном и удобном для пользователя виде. устанавливает нумерованный список. Каждый элемент списка начинается с числа или буквы и увеличивается по нарастающей.
устанавливает маркированный список.
- ,
- ,
Тройка элементов предназначена для создания списка определений. Каждый такой список начинается с контейнера , куда входит тег - создающий термин и тег
- задающий определение этого термина. Закрывающий тег
не обязателен, т.к. следующий тег сообщает о завершении предыдущего элемента. Тем не менее, лучше закрывать все теги.
Слайд 43 ![Теги таблиц 21.04.2012 Таблица состоит из строк и столбцов ячеек. Они](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1307140/slide-42.jpg)
Теги таблиц
21.04.2012
Таблица состоит из строк и столбцов ячеек. Они могут содержать
текст и рисунки. Их используются для упорядочения и представления табличных данных. Служит контейнером для элементов, определяющих содержимое таблицы. Любая таблица состоит из строк и ячеек, которые задаются с помощью тегов и .
| предназначен для создания одной ячейки таблицы. Тег | должен размещаться внутри контейнера | , который в свою очередь располагается внутри тега .
предназначен для создания одной ячейки таблицы, которая обозначается как заголовочная. Текст в ячейке отображается браузером жирным шрифтом и выравнивается по центру.
| Тег служит контейнером для создания строки таблицы.
Слайд 44 ![Фреймы 21.04.2012 Они разделяют окно браузера на отдельные области, расположенные вплотную](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1307140/slide-43.jpg)
Фреймы
21.04.2012
Они разделяют окно браузера на отдельные области, расположенные вплотную друг к
другу. В каждую из таких областей загружается самостоятельная Веб-страница определяемая с помощью тега . С их помощью Веб-страница делится на несколько документов. Они содержат навигацию по сайту и его контент. Механизм фреймов позволяет открывать документ в одном фрейме, по ссылке, нажатой в другом фрейме. Можно использовать вложенную структуру элементов. Это позволяет дробить фреймы на более мелкие области. определяет свойства отдельного фрейма, на которые делится окно браузера.
Слайд 45 ![Значения параметров у тегов. Цвет. 21.04.2012 Параметры тегов расширяют возможности тегов](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1307140/slide-44.jpg)
Значения параметров у тегов. Цвет.
21.04.2012
Параметры тегов расширяют возможности тегов и
позволяют управлять настройками отображения элементов Веб-страницы. Количество параметров велико, но их значения можно сгруппировать по разным типам: задающих цвет, размер, адрес и др. Цвет задается: с помощью шестнадцатеричного кода и по названию некоторых цветов. Чаще используется способ, основанный на шестнадцатеричной системе исчисления. Он более универсальный. Шестнадцатеричные цвета. Она в отличие от десятичной системы, базируется на числе 16. Цифры будут следующие: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Здесь числа от 10 до 15 заменены латинскими буквами. Числа больше 15 в ней образуются объединением двух чисел в одно. Так 255 в десятичной системе соответствует число FF в шестнадцатеричной.
Слайд 46 ![Значения параметров у тегов. Цвет 21.04.2012 Чтобы не возникало путаницы в](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1307140/slide-45.jpg)
Значения параметров у тегов. Цвет
21.04.2012
Чтобы не возникало путаницы в определении
системы счисления, перед шестнадцатеричным числом ставится символ решетки #, например #aa69cc. Регистр не важен. Поэтому #F0F0F0 = #f0f0f0. Типичный цвет, используемый в HTML: . Цвет фона Веб-страницы задан как #FA8E47. Первые две цифры (FA) определяют красную составляющую цвета, цифры с третьей по четвертую (8E) — зеленую, а последние две цифры (47) — синюю. В итоге получится такой цвет. Каждый из трех цветов — красный, зеленый и синий — может принимать значения от 00 до FF.
В итоге можно получить 256 оттенков.
Слайд 47 ![Значения параметров у тегов. Цвет 21.04.2012 Т.о. общее количество цветов может](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1307140/slide-46.jpg)
Значения параметров у тегов. Цвет
21.04.2012
Т.о. общее количество цветов может быть
256х256х256 = 16.777.216 комбинаций. Цветовая модель, основанная на красной, зеленой и синей составляющей получила название RGB (red, green, blue). Эта модель аддитивная. При сложении всех трех компонент получается белый цвет. Некоторые правила. Если значения компонент цвета одинаковы (например: #D6D6D6), то получим серый оттенок. Чем больше число, тем светлее цвет, значения при этом меняются от #000000 (черный) до #FFFFFF (белый). Цвет со значением #FF0000 самый красный из возможных красных оттенков. Аналогично - зеленый цвет (#00FF00) и синий (#0000FF). Желтый цвет (#FFFF00) получается смешением красного с зеленым.
Слайд 48 ![Значения параметров у тегов. Цвет 21.04.2012 Это хорошо видно на цветовом](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1307140/slide-47.jpg)
Значения параметров у тегов. Цвет
21.04.2012
Это хорошо видно на цветовом круге.
Здесь представлены основные цвета RGB и комплиментарные или дополнительные. К ним относятся желтый, голубой и фиолетовый (пурпурный). Любой цвет можно получить смешением близлежащих к нему цветов. Голубой (#00FFFF) получается за счет объединения синего и зеленого цвета. Цветовой круг
Слайд 49 ![Значения параметров у тегов. Размер. 21.04.2012 В HTML размеры элементов или](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1307140/slide-48.jpg)
Значения параметров у тегов. Размер.
21.04.2012
В HTML размеры элементов или расстояния
между ними задаются в пикселах или процентах. Пиксел — это элементарная точка на экране монитора. Она является относительной единицей измерения. Ее величина зависит от установленного экранного разрешения и размера монитора. Так популярное разрешение монитора - 1024х768 пикселей. Картинка с такими размерами будет занимать всю область экрана. Увеличив разрешение монитора до 1280х1024, мы, тем самым, уменьшим размеры изображения на экране. При использовании пикселей в качестве значений пишется только число без указания единиц, например: width="380".
Слайд 50 ![Значения параметров у тегов. Адрес. 21.04.2012 Адресом называется путь к документу,](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1307140/slide-49.jpg)
Значения параметров у тегов. Адрес.
21.04.2012
Адресом называется путь к документу, например, к
графическому файлу. Адрес нужен тогда, когда делается ссылка на Веб-страницу или загружается определенный файл. Так в теге ![]() адрес используется в качестве аргумента параметра src. Он задает путь к файлу с изображением. Синонимом адреса выступает URL (Universal Resource Locator, универсальный указатель ресурсов). Различают абсолютные и относительные адреса. Абсолютные адреса работают везде, где задан URL. Он начинаются всегда с указания протокола передачи данных. Для Веб-страниц они начинаются с ключевого слова http://. HTTP (HyperText Transfer Protocol, протокол передачи гипертекста). Описание тега BODY Слайд 51 ![Значения параметров у тегов. Адрес. 21.04.2012 Относительные адреса указываются от корня](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1307140/slide-50.jpg)
Значения параметров у тегов. Адрес.
21.04.2012
Относительные адреса указываются от корня сайта или
текущего документа. Например, код ![](pic.gif) означает загрузить графический файл с именем pic.gif. Он расположен в той же папке, что и сама веб-страница.
Адрес указывает обычно на файл index.html, который находится в корне сайта. /images/pic.gif. Слэш (символ /) перед адресом говорит о том, что адресация начинается от корня сайта. Ссылка ведет на рисунок pic.gif, который находится в папке images. А та в свою очередь размещена в корне сайта. ../help/me.html
Двоеточие перед именем указывает браузеру перейти на уровень выше в списке каталогов сайта и там «поискать» файл me.html. Слайд 52 ![Особенности текста в HTML 21.04.2012 Любое количество пробелов идущих подряд, в](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1307140/slide-51.jpg)
Особенности текста в HTML
21.04.2012
Любое количество пробелов идущих подряд, в браузере отображается
как один. Сколько бы ни было пробелов между словами, это не повлияет на конечный вид текста. Это правило относится к символам табуляции и переносу текста. Исключением из этого правила является тег , внутри него любое число пробелов отображается именно так, как оно указано в коде. Нет расстановки переносов в тексте. HTML не поддерживает расстановку переносов в словах как это делают текстовые редакторы. Это несущественно, пока не используется выравнивание текста по ширине. В этом случае блок текста выравнивается по левому и правому краю. Короткие строки при этом растягиваются за счет автоматического добавления пробелов между словами.
Слайд 53 ![Особенности текста в HTML 21.04.2012 Текст занимает ширину окна браузера. Если](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1307140/slide-52.jpg)
Особенности текста в HTML
21.04.2012
Текст занимает ширину окна браузера. Если вы просто напишите
одну длинную строку в коде HTML, то в браузере она будет отформатирована, чтобы текст поместился по ширине в окно. Переносы текста будут добавлены автоматически в местах пробела или дефиса. Что произойдет, если в тексте нет ни того, ни другого символа? Браузер не сможет создать переносы и отобразит текст одной строкой. Если она шире окна браузера, то появится горизонтальная полоса прокрутки.
Слайд 54 ![Особенности текста в HTML. Абзацы. 21.04.2012 Как правило, блоки текста разделяют](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1307140/slide-53.jpg)
Особенности текста в HTML. Абзацы.
21.04.2012
Как правило, блоки текста разделяют между собой
абзацами (параграфами). По умолчанию между ними существует небольшой вертикальный отступ, называемый отбивкой. Синтаксис создания абзацев: Абзац 1
Абзац 2 Каждый абзац начинается с тега и должен иметь необязательный закрывающий тег . Между абзацами возникают большие отступы. От них можно избавиться, если в местах переноса строк добавлять тег . В отличие от абзаца, тег переноса строки не создает вертикальных отступов между строками. Слайд 55 ![Результат использования тегов 21.04.2012 Отступы на Веб-странице при использовании абзацев](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1307140/slide-54.jpg)
Результат использования тегов
21.04.2012
Отступы на Веб-странице при использовании абзацев
Слайд 56 ![Результат использования тегов 21.04.2012 Вид текста с учетом переносов](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1307140/slide-55.jpg)
Результат использования тегов
21.04.2012
Вид текста с учетом переносов
Слайд 57 ![Значения параметров у тегов. Заголовки. 21.04.2012 Заголовки выполняют важную функцию на](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1307140/slide-56.jpg)
Значения параметров у тегов. Заголовки.
21.04.2012
Заголовки выполняют важную функцию на Веб-странице. Они
показывают важность раздела, к которому относятся. Чем больше заголовок и его «вес» , тем более он значимый. В газетах и журналах передовицы набраны крупным шрифтом, тем самым, привлекая к ним внимание и говоря: «вот это надо читать обязательно» . С помощью различных заголовков легко регулировать размер текста. Чем выше уровень заголовка, тем больше размер шрифта. Самым верхним уровнем является уровень 1 ( ), а самым нижним — уровень 6 (). Поисковики добавляют рейтинг тексту, если он находится внутри тега заголовка. Это важно для раскрутки сайта и для его занятия первых строк выдачи результата в поисковой системе по ключевым словам. Чаще применяют заголовки с первого по третий уровень.
Слайд 58 ![Выравнивание текста 21.04.2012 Выравнивание текста определяет его внешний вид и ориентацию](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1307140/slide-57.jpg)
Выравнивание текста
21.04.2012
Выравнивание текста определяет его внешний вид и ориентацию краев абзаца.
Может выполняться по левому краю, правому краю, по центру или по ширине. Наиболее распространенный вариант — выравнивание по левому краю, когда слева текст сдвигается до края, а правый остается неровным. Выравнивание по правому краю и по центру чаще используется в заголовках и подзаголовках. При выравнивании по ширине, в тексте между словами могут появиться большие интервалы. Для установки выравнивания текста используется тег параграфа с параметром align. Он определяет способ выравнивания.
Слайд 59 ![Выравнивание текста 21.04.2012 Блок текста можно выравнивать с помощью тега с](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1307140/slide-58.jpg)
Выравнивание текста
21.04.2012
Блок текста можно выравнивать с помощью тега с параметром align. Он может принимать следующие значения: left — выравнивание по левому краю, задается по умолчанию; right — выравнивание по правому краю; center — выравнивание по центру; justify — выравнивание по ширине (одновременно по правому и левому краю). Этот аргумент работает только для текста, длина которого более, чем одна строка. Аргумент align можно применять как для текста, так и для заголовков.
Слайд 60 ![Значения параметров тегов Начертание. 21.04.2012 Жирное начертание. Насыщенностью называют увеличение толщины](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1307140/slide-59.jpg)
Значения параметров тегов Начертание.
21.04.2012
Жирное начертание. Насыщенностью называют увеличение толщины линий шрифта и
соответственно контраста. Обычно различают четыре вида насыщенности: светлое начертание, нормальное, полужирное и жирное. Однако с помощью HTML можно установить только нормальное и жирное начертание. Для установки текста жирного начертания применяется два тега: и . Жирное начертание шрифта Сильное выделение текста Курсивное начертание. Курсивный шрифт представляет собой не просто наклон отдельных символов, для некоторых шрифтов это полная переделка под новый стиль, имитирующий рукописный. Курсив для текста определяют два тега: и . Курсивное начертание шрифта.
Слайд 61 ![Замечания 21.04.2012 Теги и , также как и хотя и похожи](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1307140/slide-60.jpg)
Замечания
21.04.2012
Теги и , также как и хотя
и похожи по своему действию, являются не совсем эквивалентными и заменяемыми. Тег — является тегом физической разметки и устанавливает жирное начертание текста. Тег — тегом логической разметки и выделяет помеченный текст. Разделение тегов на логическое и физическое форматирование изначально предназначалось, чтобы сделать HTML универсальным, т.е не зависящим от устройства вывода информации. Теоретически, если воспользоваться, например, речевым браузером, то текст, оформленный с помощью тегов и , будет отмечен по-разному. Но получилось так, что в популярных браузерах результат использования этих тегов равнозначен..
|