1 Интернет технологии Молородов Юрий Иванович yumo@ict.sbras.ru 07.02.2014.

Презентация:



Advertisements
Похожие презентации
HTML (от англ. Hyper Text Markup Language «язык разметки гипертекста») стандартный язык разметки документов во Всемирной паутине. Большинство веб-страниц.
Advertisements

Powerpoint Templates Page 1 Язык разметки гипертекста HTML.
Ключевые слова 1.WWW 2.Структура Web-страницыHTML 3.HTML-редактор 4.Цветовые схемы 5.гиперссылка.
Форматирование текста на Web-странице Пока наша страница выглядит не слишком привлекательно: мелкий шрифт чёрного цвета на белом фоне. С помощью тэгов.
Основы языка HTML или с чего я начинала создавать WEB-страницу.
Всемирная паутина Компьютерные телекоммуникации. 2 World Wide Web Популярнейшая служба Интернета - World Wide Web (сокращенно WWW или Web), еще называют.
Всемирная паутина Компьютерные телекоммуникации. 2 World Wide Web Популярнейшая служба Интернета - World Wide Web (сокращенно WWW или Web), еще называют.
Создание сайтов. Основы языка разметки гипертекстовых документов HTML.
это десятки миллионов Web-серверов Интернета, содержащих Web-страницы, в которых используется технология гипертекста. Технология WWW позволяет создавать.
Основные понятия HTML расшифровывается HyperText Markup Lang uage (в переводе означает Язык Разметки ГиперТекста). HTML предназначен для создания веб-
Инструментальные средства создания электронных образовательных ресурсов План лекции 1 Общее представление о языке HTML. Подготовка к созданию HTML-документа.
1 Всемирная паутина. 2 Популярнейшая служба Интернета - World Wide Web (сокращенно WWW или Web), еще называют Всемирной паутиной. Представление информации.
World Wide Web WWW. Популярнейшая служба Интернета - World Wide Web (сокращенно WWW или Web), еще называют Всемирной паутиной. Представление информации.
(HyperText Markup Language) – язык гипертекстовой разметки.
был разработан британским учёным Тимом Бернерсом-Ли приблизительно в годах. это язык разметки гипертекста.
Назначение и струкутура сети Интернет Компьютерные телекоммуникации.
Автор: Пилишкина Надежда Васильевна. HTML (Hyper Text Markup Language) «Язык гипертекстовой разметки» «Многомерный» текстовый документ, в котором установлены.
Язык разметки гипертекста. Терминология HTML. Методика использования. Основные конструкции. Лаборатория информатизации образования ИДППО Институт дополнительного.
Структура HTML- документа. Терминология Элемент - конструкция языка HTML. Это контейнер, содержащий данные и позволяющий отформатировать из определенным.
О.Б.Богомолова Web-конструирование на HTML, 2008 г. ГОУ СОШ 1909 г. Москвы учитель Пакульских Е.В.
Транксрипт:

1 Интернет технологии Молородов Юрий Иванович

2 Лекция 2 Некоторые аспекты Современного Информационного общества Скажи мне, и я забуду. Покажи мне, - я смогу запомнить. Позволь мне это сделать самому, И это станет моим навсегда.

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

Информационное общество Появление термина приписывают Юсуке Хаяши, профессору Токийского технологического института. В 1969 году японскому правительству были представлены отчёты «Японское информационное общество: темы и подходы» и «Контуры политики содействия информатизации японского общества», а в 1971 году «План информационного общества». Начиная с 1992 года термин стали употреблять западные страны. Понятие «национальная глобальная информационная инфраструктура» ввели в США после конференции Национального научного фонда и доклада Б. Клинтона и А. Гора.

Информационное общество Понятие «информационное общество» появилось в работах Экспертной группы Европейской комиссии по программам информационного общества под руководством Мартина Бангеманна - европейского эксперта по информационному обществу. Понятия информационные магистрали и супермагистрали появились в канадских, британских и американских публикациях. Сегодня термины информационное общество и информатизация используются повсеместно, и ассоциируются с развитием информационных технологий и средств телекоммуникации.

Информационное общество В знак признания приложенных усилий по развитию телекоммуникаций, в рамках всемирной встречи на высшем уровне по вопросам информационного общества, которая прошла в два этапа: в Женеве в 2003 г. и в Тунисе в 2005 г., была принята "Тунисская программа для развития информационного общества" и Обращение к Генеральной Ассамблее ООН с призывом объявить 17 мая Всемирным днем информационного общества.

Информационное общество 27 марта 2006 г. генеральная Ассамблея ООН приняла резолюцию под номером A/RES/60/252, которая провозгласила 17 мая Международным днем информационного общества. С 1969 года этот день праздновался как Международный день электросвязи (телекоммуникаций). Это было связано с созданием Международного союза электросвязи (МСЭ) в МСЭ способствовал развитию связи в мире со времен телеграфии до современных коммуникаций и информационного пространства.

Компоненты информационного общество

Информационное общество В настоящее время развитые страны мира (США, Япония, страны Западной Европы) фактически уже вступили в информационное общество. Другие, и Россия тоже, находятся на ближних подступах к нему. В качестве критериев развитости информационного общества можно выбрать три: 1.наличие компьютеров; 2.уровень развития компьютерных сетей; 3.количество населения, занятого в информационной сфере, использующего информационные и коммуникационные технологии в своей повседневной деятельности.

Информационное общество Сеть Internet появилась в результате решения одной проблемы на уровне правительства США. Для совместного доступа к файлам правительственных учреждений нужно придумать способ объединения отдельных компьютерных сетей в единую сеть. Решение этой задачи было поручено ARPA (Advanced Research Projects Agency Управление перспективного планирования научно-исследовательских работ). Нужно было создать сеть, состоящую из нескольких компьютерных сетей. С этой задачей организация успешно справилась, в результате чего появилась ARPAnet и WAN.

Информационное общество Аббревиатура WAN (Wide-Area Network Глобальная сеть) стала ничем не примечательной, привычной для подавляющего большинства пользователей, находящихся в разных частях земного шара. Консо́рциум Всеми́рной паути́ны (World Wide Web Consortium, W3C) организация, разрабатывающая и внедряющая технологические стандарты для Всемирной паутины. Консорциум возглавляет Dr. Jeffrey Jaffe автор разработок в области информационных технологий.

Девиз компании World Wide Web Consortium "To lead the World Wide Web, to its full potential by developing protocols and guidelines, that ensure long-term growth for the Web." «Привести WWW к его наиболее эффективному полному использованию, путем разработки протоколов и руководя- щих принципов, которые обеспечивают долгосрочный рост для Интернета». Год основания: октябрь 1994 Расположение :MIT/CSAIL – США, ERCIM - Франция Keio University – Япония и др. MIT Computer Science and Artificial Intelligence Laboratory European Research Consortium for Informatics and Mathematics. Веб-сайт

Общую администрацию Консорциума Всемирной паутины осуществляют 3 организации: Массачусетсский технологический институт ( Massachusetts Institute of Technology, MIT) в США; Европейский консорциум по исследованиям в области информатики и математики (European Research Consortium for Informatics and Mathematics, ERCIM) во Франции; Университет Кейо (Keio University) в Японии. Членом Консорциума может стать юридическое или частное лицо, занимающееся Веб-технологиями и заинтересованное в развитии Интернета. Основным источником финансирования Консорциума являются членские взносы. Членами Консорциума уже являются более 350 организаций.

Для работы в World Wide Web в вашем компьютере необходимо установить Web-браузер, например Internet Explorer или Netscape Navigator. После того как вы дадите команду найти нужную информацию, Web-браузер средствами протокола HTTP осуществит поиск компьютера в сети, на котором эта информация находится. С помощью HTTP, с компьютера, на котором находятся нужные данные (т.е. с Web-сервера), в ваш компьютер будет отправлена соответствующая Web-страница (в формате обычного текстового файла). Все, что вы видите на просматриваемой Web-странице (ее вид, графические изображения и текст), является результатом интерпретации HTML-тегов (дескрипторов) этой страницы Web-браузером, установленным на вашем ПК.

Благодаря IP-протоколу и вновь созданной сети, объединявшей несколько отдельных компьютерных сетей, обмен информацией стал значительно проще, чем когда-либо, но все еще оставался достаточно сложным. Для того чтобы найти определенные данные в Internet, необходимо было точно знать, где эти данные находятся. Нужно было точно знать, как именно компьютеры всей сети подключены друг к другу, и только потом, "путешествуя" по сети, добраться к искомой информации..

Основной протокол информационного общества Слова "модем", "электронная почта" и "коммутируемый доступ" стали привычными в нашем лексиконе. Создание WAN стало возможным, в результате разработки общего компьютерного языка (протокола) Internet Protocol (IP). Теперь все компьютеры получили возможность "общения" друг с другом. Internet Protocol (IP) предопределенный набор правил, благодаря которым обеспечивается связь между компьютерами, независимо от операционных систем, которые на этих компьютерах установлены.

HTTP это не единственный протокол, который используется в Internet. Для каждой отдельной сетевой службы предназначен свой собственный протокол. Это протокол обмена электронной почтой SMTP (Simple mail transfer protocol ), протокол передачи файлов – ftp, и др. В Web-браузерах протокол HTTP используется для чтения файлов находящихся на других компьютерах.

В начале 90-х г., появился новый протокол Hypertext Transfer Protocol (HTTP). Благодаря нему доступ к данным в Internet стал открытым для любого пользователя, с любого уголка земного шара. Теперь, для того чтобы открыть какую-либо другую Web- страницу, вам достаточно щелкнуть мышью на нужной ссылке. Хотя код протокола HTTP был технологическим прорывом, для работы в сети необходимы и другие программные средства. Для интерпретации информации, которая находится в компьютерах, объединенных в сеть, нужны собственные коммуникационные средства. Именно таким программным средством для World Wide Web и стал язык HTML- Hypertext Markup Language.

Справочник по тегам html-документа Запоминать все теги и их параметры сложно, поэтому приходится заглядывать в руководства, для уточнения того или иного вопроса. Справочник нужен всем!. Справочники в Интернете Описание тегов HTML (на английском языке) Список атрибутов тегов (на английском языке) Справочник по HTML Брайана Уильямса (на английском языке) Справочник по HTML на сайте htmlbook.ru

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

Появление гипертекста В середине 1960-х Тед Нельсон создал слово "гипертекст" для описания системы непоследовательных ссылок внутри текста. Идея состояла в том, чтобы перемещаться по текстовым ссылкам, не читая при этом материал в линейной последовательности. Фрагмент информации в одном месте будет вести к родственной информации в другом месте через цепочку ссылок, чтобы собрать сведения из различных источников, разбросанных по множеству документов.

Появление гипертекста И только пятнадцать лет спустя Тим Бернерс-Ли, работавший консультантом в Европейском центре ядерных исследований (CERN), написал программу с названием "Enquire-Within-Upon-Everything" ("Задай любой вопрос") Она позволяла создавать ссылки между произвольными узлами текста в документе. Каждый узел имел заглавие-идентификатор и список двунаправленных ссылок, поэтому читатели могли перемещаться из одного раздела документа в другой, активируя текстовые ссылки.

Появление гипертекста В 1990 Бернерс-Ли начал работу над гипертекстовым "браузером". Он придумал термин "WorldWideWeb" ("Всемирная паутина") для названия программы и "World Wide Web" - для названия проекта. Проект WWW был первоначально разработан для создания распределенной гипермедийной системы, которая была легко доступна из любого настольного компьютера, и для согласования физических исследований, разбросанных по всему миру. Web содержала стандартные форматы для текста, графики, звука и видео, которые легко индексировались и были доступны для поиска всем сетевым машинам.

Появление гипертекста Были предложены стандарты для: Единообразного локатора ресурса (URL - Uniform Resource Locator). Он является схемой адресации Web. Протокола передачи гипертекста (HTTP - HyperText Transfer Protocol). Он является множеством сетевых правил для передачи Web-страниц. Языка разметки гипертекста (HTML - HyperText Markup Language.

Язык гипертекстовой разметки HTML Внешний вид HTML документа (заголовок, тело документа и колонтитул) определяется специальными его элементами. Они должным образом интерпретирует Web-браузер. Эти элементы стандартизированы Консорциумом World Wide Web (World Wide Web Consortium W3C) и называются дескрипторами (или тегами). Дескрипторы (теги) это элементы, которыми определяются внешний вид и "поведение" Web-страницы. Как правило, внешний вид и расположение элементов Web- страницы (текст, изображение и т.д.) определяются парой дескрипторов, между которыми находятся эти элементы.

Размещение файлов Web- страниц Для создания файлов Web-страниц можно использовать простейший текстовый редактор. Существуют и специализированные средства. Чтобы другие пользователи Internet могли по оценить ваши Web-страницы, файлы этих страниц необходимо разместить на Web-сервере. Место на нем, и подключение к Internet обеспечивают Internet-провайдеры (JSP Internet Service Provider). Есть и другие организации, которые могут предоставить услуги по хранению Ваших Web-страниц на сервере. Они называются Web Presence Provider (WPP).

Основные элементы HTML HTML и XHTML это языки гипертекстовой разметки, которыми определяется структура текстовых элементов документа; HTML язык, не зависящий от типа компьютерной платформы. Независимо от компьютерной платформы будь то PC, Macintosh или UNIX, если воспользоваться только Web-браузером, для посетителей вашего Web-узла страницы будут отображаться одинаково; XHTML это последняя и более структурированная версия HTML.

Основные элементы HTML HTML это язык макетирования документов и описания гиперссылок. Поскольку он не соответствует строгому стандарту XML, то W3С предложил язык XHTML, переработав HTML в соответствии с требованиями XML. XHTML поддерживает все возможности HTML, применяя более жесткие правила XML. Создавать XHTML-документы ничуть не сложнее чем писать обычную HTML-разметку, а перспективы использования таких документов значительно шире, поскольку к ним оказывается применим весь инструментарий XML. Поэтому в последнее время наибольшее внимание уделяется именно XHTML, как приоритетному инструменту разметки гипертекста.

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

Инструментарий HTML Браузер Браузер это программа, предназначенная для просмотра веб-страниц. Вначале подойдет любой браузер, но с повышением опыта и знаний потребуется завести несколько, чтобы проверять правильность отображения сайта в разных браузерах. Каждый браузер имеет свои уникальные особенности, поэтому для проверки универсальности кода требуется просматривать и корректировать код с их учетом. На сегодняшний день наибольшей популярностью пользуются три браузера: Firefox, Internet Explorer и Opera.

Инструментарий HTML Графический редактор Графический редактор необходим для обработки изображений и их подготовки для публикации на веб- странице. Самой популярной программой такого рода является Photoshop. Но зачастую лучше воспользоваться чем-нибудь более простым. Так, программа Paint.Net позволяет сделать все необходимые манипуляции с изображениями, вдобавок бесплатна для использования.

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

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

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

35 Структура html-документа Назв. Текст документа! Автор документа

36 Шаблон базового документа Здесь будет основной текст страницы! Текст набрал Ю.Молородов 22 апреля 2012 г. Структура html-документа

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

38 Замечание Часто можно встретить код HTML вообще без использования. Но Веб-страница все равно будет показана. Однако может получиться, что один и тот же документ отображается в браузере по-разному при использовании и без него. Кроме того, браузеры могут по-своему показывать такие документы, в итоге страница может отображаться совсем не так, как это хотел разработчик. Чтобы таких ситуаций не произошло, добавляйте в начало документа. Структура html-документа

39 В XHTML предусмотрены три разновидности дескриптора : strict, transitional и frameset. В любом случае декларировать этот дескриптор надлежит только в верхней части кода Web-страницы. Strict. Эту разновидность дескриптора следует использовать только в том случае, если ваши страницы предназначены для просмотра с помощью Web-браузеров последних версий, которые должным образом поддерживают таблицу стилей. Код дескриптора такого типа выглядит следующим образом: Структура html-документа

40 Transitional. Если вы не уверены, что доступ к вашим Web-страницам будет осуществляться только с помощью браузеров последних версий, используйте разновидность transitional дескриптора. Frameset. Тип frameset следует использовать для работы с фреймами. < DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "DTD/xhtmll-frameset.dtd"> Обратите внимание, что дескриптор набран прописными буквами. Прочие дескрипторы Web-страницы должны быть набраны строчными буквами Структура html-документа

41 Простейший html-документ < title>Пример веб-страницы Заголовок Первый абзац. Второй абзац. Текст набрал Ю.Молородов 26 января 2013 г.

42 Типы тегов (дискрипторов) Каждый тег HTML принадлежит к определенной группе тегов: табличные теги направлены на формирование таблиц и не могут применяться для других целей. Условно теги делятся на следующие типы: теги верхнего уровня; теги заголовка документа; блочные элементы; встроенные элементы; универсальные элементы; списки; таблицы

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

44 Теги верхнего уровня Тег предназначен для хранения содержания Веб- страницы, отображаемого в окне браузера. Информацию, которую следует выводить в документе, следует располагать именно внутри контейнера. К такой информации относится текст, изображения, таблицы, списки и др Здесь контейнер определяет «каркас» всей Веб-страницы. Вначале задается тег, затем идет контейнер, в нем хранится содержательная часть документа, которая и отображается в браузере. Теги и хотя и не относятся к обязательным тегам (их можно не размещать в коде), но стоит добавлять всегда. Это позволяет получить четкую и понятную структуру документа.

45 Теги заголовка документа К ним относятся элементы, которые располагаются в контейнере. Эти теги не отображаются в окне браузера, за исключением тега, который определяет название Веб- страницы. Используется для отображения строки текста в левом верхнем углу окна браузера. Она сообщает пользователю название сайта и другую информацию разработчика. Метатеги используются для хранения информации, предназначенной для браузеров и поисковых систем. Например, механизмы поисковых систем обращаются к метатегам для получения описания сайта, ключевых слов и других данных. Тег всего один, он у него масса параметров, поэтому к нему и применяется множественное число.

46 Блочные элементы Блочные элементы занимают всю доступную ширину, высота элемента определяется его содержимым, и он всегда начинается с новой строки. Предназначен для выделения длинных цитат внутри документа. Текст, обозначенный этим тегом, отображается как выровненный блок с отступами слева и справа (примерно по 40 пикселов), а также с пустым пространством сверху и снизу. Тег относится к универсальным блочным контейнерам и применяется в тех случаях, где нужны блочные элементы без дополнительных свойств. С помощью тега можно выравнивать текст внутри этого контейнера с помощью параметра align.... Эта группа тегов определяет текстовые заголовки разного уровня, которые показывают относительную важность секции, расположенной после заголовка.

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

48 Встроенные элементы Это элементы Веб-страницы, которые являются непосредственной частью другого элемента, например, текстового абзаца. Они используются для изменения вида текста или его логического выделения. Тег является важным элементом HTML. Он предназначен для создания ссылок. В зависимости от присутствия параметров name или href тег устанавливает ссылку или якорь. Определяет жирное начертание шрифта. Тег увеличивает размер шрифта на единицу по сравнению с обычным текстом. В HTML размер шрифта измеряется в условных единицах от 1 до 7. Средний размер текста, используемый по умолчанию, принят 3. Т.о., добавление тега увеличивает текст на одну условную единицу. Тег устанавливает перевод строки в том месте, где он находится. Тег не добавляет пустой отступ перед строкой, в отличие от тега параграфа.

49 Встроенные элементы Тег предназначен для акцентирования текста, отображая его курсивом. Устанавливает курсивное начертание шрифта. Предназначен для отображения на Веб-странице изображений в графическом формате GIF, JPEG или PNG. Если нужно, то рисунок можно сделать ссылкой на другой файл, поместив тег в контейнер. При этом вокруг изображения отображается рамка, которую можно убрать, добавив параметр border="0" в тег. Он уменьшает размер шрифта на единицу по сравнению с обычным текстом. Похож на тег, но действует с точностью до наоборот. Предназначен для определения встроенного элемента внутри документа. Используется для акцентирования текста. Браузеры отображают такой текст жирным начертанием.

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

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

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

53 Теги таблиц Таблица состоит из строк и столбцов ячеек. Они могут содержать текст и рисунки. Их используются для упорядочения и представления табличных данных. Служит контейнером для элементов, определяющих содержимое таблицы. Любая таблица состоит из строк и ячеек, которые задаются с помощью тегов и. предназначен для создания одной ячейки таблицы. Тег должен размещаться внутри контейнера, который в свою очередь располагается внутри тега. предназначен для создания одной ячейки таблицы, которая обозначается как заголовочная. Текст в ячейке отображается браузером жирным шрифтом и выравнивается по центру. Тег служит контейнером для создания строки таблицы.

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

55 Значения параметров у тегов. Цвет Параметры тегов расширяют возможности тегов и позволяют управлять настройками отображения элементов Веб-страницы. Количество параметров велико, но их значения можно сгруппировать по разным типам: задающих цвет, размер, адрес и др. Цвет задается: с помощью шестнадцатеричного кода и по названию некоторых цветов. Чаще используется способ, основанный на шестнадцатеричной системе исчисления. Он более универсальный. Шестнадцатеричные цвета. Она в отличие от десятичной системы, базируется на числе 16. Цифры будут следующие: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Здесь числа от 10 до 15 заменены латинскими буквами. Числа больше 15 в ней образуются объединением двух чисел в одно. Так 255 в десятичной системе соответствует число FF в шестнадцатеричной.

56 Значения параметров у тегов. Цвет Чтобы не возникало путаницы в определении системы счисления, перед шестнадцатеричным числом ставится символ решетки #, например #aa69cc. Регистр не важен. Поэтому #F0F0F0 = #f0f0f0. Типичный цвет, используемый в HTML:. Цвет фона Веб-страницы задан как #FA8E47. Первые две цифры (FA) определяют красную составляющую цвета, цифры с третьей по четвертую (8E) зеленую, а последние две цифры (47) синюю. В итоге получится такой цвет. FA+8E+47=FA8E47 Каждый из трех цветов красный, зеленый и синий может принимать значения от 00 до FF. В итоге можно получить 256 оттенков.

57 Значения параметров у тегов. Цвет Т.о. общее количество цветов может быть 256х256х256 = комбинаций. Цветовая модель, основанная на красной, зеленой и синей составляющей получила название RGB (red, green, blue). Эта модель аддитивная. При сложении всех трех компонент получается белый цвет. Некоторые правила. Если значения компонент цвета одинаковы (например: #D6D6D6), то получим серый оттенок. Чем больше число, тем светлее цвет, значения при этом меняются от # (черный) до #FFFFFF (белый). Цвет со значением #FF0000 самый красный из возможных красных оттенков. Аналогично - зеленый цвет (#00FF00) и синий (#0000FF). Желтый цвет (#FFFF00) получается смешением красного с зеленым.

58 Значения параметров у тегов. Цвет Это хорошо видно на цветовом круге. Здесь представлены основные цвета RGB и комплиментарные или дополнительные. К ним относятся желтый, голубой и фиолетовый (пурпурный). Любой цвет можно получить смешением близлежащих к нему цветов. Голубой (#00FFFF) получается за счет объединения синего и зеленого цвета. Цветовой круг

59 Значения параметров у тегов. Размер В HTML размеры элементов или расстояния между ними задаются в пикселах или процентах. Пиксел это элементарная точка на экране монитора. Она является относительной единицей измерения. Ее величина зависит от установленного экранного разрешения и размера монитора. Так популярное разрешение монитора х768 пикселей. Картинка с такими размерами будет занимать всю область экрана. Увеличив разрешение монитора до 1280х1024, мы, тем самым, уменьшим размеры изображения на экране. При использовании пикселей в качестве значений пишется только число без указания единиц, например: width="380".

60 Значения параметров у тегов. Адрес Адресом называется путь к документу, например, к графическому файлу. Адрес нужен тогда, когда делается ссылка на Веб-страницу или загружается определенный файл. Так в теге адрес используется в качестве аргумента параметра src. Он задает путь к файлу с изображением. Синонимом адреса выступает URL (Universal Resource Locator, универсальный указатель ресурсов). Различают абсолютные и относительные адреса. Абсолютные адреса работают везде, где задан URL. Он начинаются всегда с указания протокола передачи данных. Для Веб-страниц они начинаются с ключевого слова HTTP (HyperText Transfer Protocol, протокол передачи гипертекста). Описание тега BODY

61 Значения параметров у тегов. Адрес Относительные адреса указываются от корня сайта или текущего документа. Например, код означает загрузить графический файл с именем pic.gif. Он расположен в той же папке, что и сама веб-страница. Адрес указывает обычно на файл index.html, который находится в корне сайта. /images/pic.gif. Слэш (символ /) перед адресом говорит о том, что адресация начинается от корня сайта. Ссылка ведет на рисунок pic.gif, который находится в папке images. А та в свою очередь размещена в корне сайта.../help/me.html Двоеточие перед именем указывает браузеру перейти на уровень выше в списке каталогов сайта и там «поискать» файл me.html.

62 Особенности текста в HTML Любое количество пробелов идущих подряд, в браузере отображается как один. Сколько бы ни было пробелов между словами, это не повлияет на конечный вид текста. Это правило относится к символам табуляции и переносу текста. Исключением из этого правила является тег, внутри него любое число пробелов отображается именно так, как оно указано в коде. Нет расстановки переносов в тексте. HTML не поддерживает расстановку переносов в словах как это делают текстовые редакторы. Это несущественно, пока не используется выравнивание текста по ширине. В этом случае блок текста выравнивается по левому и правому краю. Короткие строки при этом растягиваются за счет автоматического добавления пробелов между словами.

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

64 Особенности текста в HTML. Абзацы Как правило, блоки текста разделяют между собой абзацами (параграфами). По умолчанию между ними существует небольшой вертикальный отступ, называемый отбивкой. Синтаксис создания абзацев: Абзац 1 Абзац 2 Каждый абзац начинается с тега и должен иметь необязательный закрывающий тег. Между абзацами возникают большие отступы. От них можно избавиться, если в местах переноса строк добавлять тег. В отличие от абзаца, тег переноса строки не создает вертикальных отступов между строками.

65 Значения параметров у тегов. Заголовки Заголовки выполняют важную функцию на Веб-странице. 1.Они показывают важность раздела, к которому относятся. Чем больше заголовок и его «вес», тем более он значимый. В газетах и журналах передовицы набраны крупным шрифтом, тем самым, привлекая к ним внимание и говоря: «вот это надо читать обязательно». 2.С помощью различных заголовков легко регулировать размер текста. Чем выше уровень заголовка, тем больше размер шрифта. Самым верхним уровнем является уровень 1 ( ), а самым нижним уровень 6 ( ). 3.Поисковики добавляют рейтинг тексту, если он находится внутри тега заголовка. Это важно для раскрутки сайта и для его занятия первых строк выдачи результата в поисковой системе по ключевым словам. Чаще применяют заголовки с первого по третий уровень.

66 Выравнивание текста Выравнивание текста определяет его внешний вид и ориентацию краев абзаца. Может выполняться по левому краю, правому краю, по центру или по ширине. Наиболее распространенный вариант выравнивание по левому краю, когда слева текст сдвигается до края, а правый остается неровным. Выравнивание по правому краю и по центру чаще используется в заголовках и подзаголовках. При выравнивании по ширине, в тексте между словами могут появиться большие интервалы. Для установки выравнивания текста используется тег параграфа с параметром align. Он определяет способ выравнивания.

67 Выравнивание текста Блок текста можно выравнивать с помощью тега с параметром align. Он может принимать следующие значения: left выравнивание по левому краю, задается по умолчанию; right выравнивание по правому краю; center выравнивание по центру; justify выравнивание по ширине (одновременно по правому и левому краю). Этот аргумент работает только для текста, длина которого более, чем одна строка. Аргумент align можно применять как для текста, так и для заголовков.

68 Значения параметров тегов Начертание Жирное начертание. Насыщенностью называют увеличение толщины линий шрифта и соответственно контраста. Обычно различают четыре вида насыщенности: светлое начертание, нормальное, полужирное и жирное. Однако с помощью HTML можно установить только нормальное и жирное начертание. Для установки текста жирного начертания применяется два тега: и. Жирное начертание шрифта Сильное выделение текста Курсивное начертание. Курсивный шрифт представляет собой не просто наклон отдельных символов, для некоторых шрифтов это полная переделка под новый стиль, имитирующий рукописный. Курсив для текста определяют два тега: и. Курсивное начертание шрифта.

69 Замечания Теги и, также как и хотя и похожи по своему действию, являются не совсем эквивалентными и заменяемыми. Тег является тегом физической разметки и устанавливает жирное начертание текста. Тег тегом логической разметки и выделяет помеченный текст. Разделение тегов на логическое и физическое форматирование изначально предназначалось, чтобы сделать HTML универсальным, т.е не зависящим от устройства вывода информации. Теоретически, если воспользоваться, например, речевым браузером, то текст, оформленный с помощью тегов и, будет отмечен по-разному. Но получилось так, что в популярных браузерах результат использования этих тегов равнозначен..

Благодарю за внимание! Ваши вопросы!