html css. NSFNET — развитие Интернет 1986 г















































xhtml_i_css.ppt
- Количество слайдов: 65
html css
NSFNET - развитие Интернет 1986 г - началось финансирование Национального научного фонда (NSF - National Science Foundation) Сеть NSFNET была первоначально создана для связи суперкомпьютеров в основных исследовательских организациях, но она быстро выросла и включила в себя большинство крупнейших университетов и исследовательских лабораторий. В 1990 г. существовало более 300000 хост-компьютеров.
NSFNET - развитие Интернет В 1994 г. по поручению NSF был подготовлен отчет с названием "Осознание информационного будущего: Интернет и дальнейшее развитие". Этот отчет представил программу эволюции "информационной супермагистрали" и оказал значительное влияние на пути развития Интернет.
NSFNET - развитие Интернет В 1995 г. финансирование NSFNET было прекращено и были сняты ограничения на коммерческое использование. Это привело к экспоненциальному росту использования Интернет. Финансирование, которое шло на поддержку NSFNET, было перераспределено между региональными сетями, чтобы помочь им в получении соединения с Интернет у многочисленных новых коммерческих поставщиков сетевых услуг. За следующие три года количество хост-сайтов росло на миллион в год, а в 1995 -1997 гг. число сайтов увеличивалось более чем на 6 миллионов в год и достигло почти 20 миллионов.
NSFNET - развитие Интернет 24 октября 1995 г. Федеральный совет по сетям (Federal Networking Council) единогласно одобрил резолюцию, определяющую термин Интернет (Internet): Термин "Internet" (Интернет) относится к глобальной информационной системе, которая – - логически связана глобально уникальным адресным пространством на основе Протокола Интернет (IP) или его последующими расширениями/ усовершенствованиями; - способна поддерживать коммуникацию с помощью пакета протоколов TCP/IP или его последующими расширениями/ усовершенствованиями, и/или другими, совместимыми с IP протоколами; и - предоставляет, использует или делает доступными, публично или в частном порядке, высокоуровневые службы, опирающиеся на коммуникацию и описанную здесь инфраструктуру.
WWW - Информационная сеть e-mail и пересылка файлов были важны для развития Интернет, но они не обладали удобными методами, которые необходимы пользователям-новичкам, чтобы получить доступ к хранилищам информации, разбросанным по всему миру. Было много технических проблем, связанных с коммуникацией через Интернет.
WWW - Информационная сеть В середине 1960-х Тед Нельсон придумал термин "гипертекст" для описания системы непоследовательных ссылок внутри текста. Идея состояла в том, чтобы перемещаться по текстовым ссылкам, не читая при этом материал в линейной последовательности. Фрагмент информации в одном месте будет вести к родственной информации в другом месте через цепочку ссылок, чтобы собрать сведения из различных источников, разбросанных по множеству документов.
WWW - Информационная сеть Пятнадцать лет спустя Тим Бернерс-Ли (консультант из Европейского центра ядерных исследований (CERN)) написал программу с названием "Enquire-Within-Upon-Everything" ("Задай любой вопрос"), которая позволяла создавать ссылки между произвольными узлами текста в документе. Каждый узел имел заглавие-идентификатор и список двунаправленных ссылок, поэтому читатели могли перемещаться из одного раздела документа в другой, активируя текстовые ссылки.
WWW - Информационная сеть В 1990 Бернерс-Ли начал работу над гипертекстовым "браузером". Он придумал термин "WorldWideWeb" ("Всемирная паутина") для названия программы и "World Wide Web" - для названия проекта. Проект WWW был первоначально разработан для создания распределенной гипермедийной системы, которая была легко доступна из любого настольного компьютера, и для согласования физических исследований, разбросанных по всему миру. Web содержала стандартные форматы для текста, графики, звука и видео, которые легко индексировались и были доступны для поиска всем сетевым машинам. Были предложены стандарты для Единообразного локатора ресурса (URL - Uniform Resource Locator), который является схемой адресации Web; Протокола передачи гипертекста (HTTP - HyperText Transfer Protocol), который является множеством сетевых правил для передачи Web-страниц; и Языка разметки гипертекста (HTML - HyperText Markup Language)
WWW - Информационная сеть Прототип браузера был написан для компьютера Apple Next, который был не очень широко распространен. Была создана упрощенная версия, которая подходила для любой компьютерной платформы, так называемый "Line-Mode Browser" ("Построчный браузер"), и выпущена центром CERN как свободно доступная программа (freeware). Позднее Бернерс-Ли переехал на работу в MIT (Массачусетский технологический институт) где участвовал в создании Консорциума WWW (W3С), который сегодня поддерживает стандарты технологий Web.
WWW - Информационная сеть В январе 1993 г. Марк Андреессен, который работал в Национальном центре суперкомпьютерных приложений (NCSA) в Университете Иллинойса, выпустил версию своего графического браузера для Web на основе принципа "укажи и щелкни" для работы на машинах Unix. В августе Андреессен и его коллеги по NCSA выпустили бесплатные версии для Macintosh и Windows. Андреессен и Эрик Бина разработали браузер Mosaic, а позже основали корпорацию Netscape для производства его потомка браузера Navigator, одного из первых и наиболее популярных коммерческих браузеров. В августе 1994 г. NCSA передала все коммерческие права на браузер Mosaic компании Spyglass, Inc. Spyglass впоследствии лицензировала эту технологию нескольким другим компаниям, включая Microsoft, для использования в Internet Explorer. И только в 1996 г. компания Microsoft стала основным игроком на рынке браузеров.
Интернет возник в результате сближения множества технологий, которые соединились с целью электронного обмена информацией. Сегодня Интернет является сетью взаимосвязанных сетей, которые используют общие коммуникационные протоколы, или правила обмена, для передачи информации между компьютерами. Одним из этих протоколов является Протокол передачи гипертекста - HTTP, который управляет обменом между компьютерами гипертекстовыми документами или страницами Web. Процесс обмена информацией, который применяет этот протокол, в своей совокупности называется Всемирной паутиной (WWW - World Wide Web ). Другими протоколами Интернет являются Протокол передачи файлов (FTP - File Transfer Protocol), а также Простой протокол пересылки почты (SMTP - Simple Mail Transfer Protocol), который используется для обмена сообщениями e-mail. Интернет не является единой сущностью. Он объединяет множество различных способов поддержания и обмена информацией среди множества различных компьютеров во множестве различных сетей, разбросанных по всему миру.
Всемирная паутина WWW является одним из таких методов сбора и обмена информацией. Она основывается на использовании страниц Web в качестве механизма упаковки и передачи информации между компьютерами, соединенными с Интернет. Страница Web включает в себя текстовую информацию вместе со ссылками на связанную с ней текстовую или графическую информацию (контент), находящуюся где-то в другом месте в Интернет. Эта информация форматируется для представления с помощью языка разметки гипертекста (HTML), чтобы организовать и определить стиль представленной информации и связать с другим контентом на отдаленных компьютерах.
http://www.internetworldstats.com/stats.htm http://www.internetworldstats.com/list2.htm#q-z http://marketshare.hitslink.com/browser-market-share.aspx?qprid=0 http://www.artlebedev.ru/tools/browsers/
Серверы и клиенты
Доступ к элементам WEB http://www.google.com/enterprise/search/mini.html URL состоит из нескольких частей: протокол - Часть адреса "http" определяет метод сетевой передачи (протокол), используемый для поиска и доставки страницы браузеру. HTTP является протоколом передачи гипертекста, стандартным методом, который применяется для взаимодействия с WWW. имя домена - Часть адреса www.google.com определяет имя сервера. Практически всем серверам Web присвоены имена доменов для уникальной идентификации среди всех серверов в Интернет. При отсутствии имени, местонахождение сервера можно определить по его числовому адресу протокола Интернет (IP), записанному в формате с точками 000.000.000.000. Однако обычно используются имена доменов, так как адреса IP трудно запоминать. путь доступа - После прибытия на сервер необходимо пройти путь доступа к каталогу, чтобы найти определенный документ для извлечения. Cтраница Web имеет путь доступа enterprise/mini; то есть документ расположен в каталоге mini, который является подкаталогом каталога enterprise. имя файла - Имя файла документа является конечной частью пути доступа. Web страница с именем index.html расположена в каталоге mini.
URL - URI Хотя термин "URL" используется повсеместно, более точно называть Web-адрес URI (Uniform Resource Identifier - Единообразный идентификатор ресурса). Этот термин подчеркивает, что ресурсы Web являются чем-то большим, чем просто страницами Web; они могут быть графическими изображениями, файлами мультимедиа, загружаемыми файлами текстового процессора, электронной таблицы, и базы данных, электронными почтовыми ящиками и множеством других типов документов и служб Web.
Язык разметки HTML С самого начала языком разметки для страниц Web был язык разметки гипертекста (HTML). Он действует с помощью специальных команд, которые помещают вокруг текстового и графического контента (информационного содержания), присутствующего на странице. Эти команды инструктируют браузер, как организовать и вывести этот контент.
Язык разметки HTML консорциум WWW (W3C) поддерживает стандарты технологий Интернет, включая стандарты для языков разметки Web. Самый ранний стандарт HTML появился в 1995 г., за ним последовали версии HTML 3.0, HTML 3.2, и завершилась разработка в 1999 г. версией HTML 4.01. Однако в дальнейшем происходит существенная переработка языков разметки.
Язык разметки HTML
XHTML При создании страниц Web рекомендуется включать кодирование, чтобы указать стандарт W3C, которому будет следовать кодирование. Поэтому желательно, чтобы все страницы Web включали следующую начальную строку кода для указания, что документ Web является фактически документом XML:
XHTML Кроме того, страница Web должна указать, с каким множеством стандартов она согласована. Страница Web обозначает свое соответствие стандарту с помощью Определения типа документа (DTD), указанного в начале страницы после объявления XML. Так как основным стандартом соответствия, которому следует учебник, является XHTML 1.1, то DTD соответствия кодируется следующим образом.
XHTML Три DTD соответствия, которые необходимо указывать для версий XHTML 1.0, являются:
XHTML корневым элементом (открывающим тегом) страницы XHTML должен быть тег , указывающий пространство имен применяемого стандарта, то есть, расположение в Web применяемого для страницы стандарта XHTML.
Типы тегов XHTML Для различных задач компоновки и определения стилей используются разные типы тегов XHTML. Представленный ниже список является одним из способов классификации тегов согласно их основному применению. Теги компоновки документа. Теги форматирования текста. Теги форматирования списков. Теги ссылок. Теги таблиц. Теги фреймов. Теги форм. Теги мультимедиа.
Контейнерные теги, пустые теги Теги XHTML являются специальными ключевыми словами, окруженными угловыми скобками "<" и ">". "Имена" этих элементов указывают на назначение тега и предписывают браузеру интерпретировать вложенный контент специальным образом. В соответствии со стандартами XHTML все ключевые слова записываются символами нижнего регистра. Большинство тегов XHTML кодируются парами из открывающего и закрывающего тегов, называемых контейнерными тегами. Открывающий тег является самим ключевым словом, появляющимся между символами < и >; закрывающий тег имеет такой же формат, в котором перед ключевым словом стоит прямая косая черта (/). Эта пара контейнерных тегов охватывает данные, к которым применяется форматирование. Следовательно, пара контейнерных тегов ... окружает весь документ HTML, чтобы указать, что все находящееся между ними кодируется на языке HTML. Таким же образом пара контейнерных тегов
Контейнерные теги, пустые теги Не все теги являются контейнерными, то есть они не "окружают" данные, которые будут форматироваться, а кодируются единственным, автономным тегом. Такие пустые теги кодируются специальным образом, чтобы соответствовать стандартам XHTML. Они должны содержать символ наклонной черты (/) непосредственно перед закрывающей угловой скобкой. Например, одиночный тег для вывода горизонтальной линии на странице кодируется как
, а одиночный тег для создания разрыва строки в текстовом параграфе - как
. Такое специальное кодирование указывает, что тег служит одновременно открывающим и закрывающим.
СSS – таблицы каскадных стилей Теги XHTML являются идентификаторами и контейнерами текстовой и графической информации, выводимой на странице Web. Их основное применение состоит в описании структуры этого содержимого, в упаковке его для размещения на этой странице. Однако большинство страниц Web содержат больше, чем обычный текст и размещенные в нем с помощью тегов XHTML встроенные изображения. Информация на странице имеет дополнительное оформление, делающее ее более привлекательной и легко читаемой. Различные виды шрифта, размер текста, цвет и другие характеристики форматирования делают страницу более удобной для чтения и, при благоразумном использовании, могут сделать информацию более понятной.
СSS – таблицы каскадных стилей В предыдущих версиях HTML большая часть оформления контента страницы происходила с помощью атрибутов, задаваемых как часть ее тегов. Атрибуты определяли дополнительные спецификации форматирования помимо тех, которые подразумевает само имя тега. Например, начертание шрифта можно задавать для текстовой информации, окружая ее тегом , содержащим атрибуты для задания вида шрифта, размера и цвета: . Различные теги содержали различные атрибуты для форматирования своего содержимого различным образом. В текущих версиях XHTML атрибуты тегов почти исчезли, будучи исключены (исключены в использовании) в пользу каскадных таблиц стилей (CSS - Cascading Style Sheets), или просто кратко "таблиц стилей".
СSS – таблицы каскадных стилей Таблица стилей является набором характеристик оформления, связанных с тегами XHTML. Эти характеристики оформления состоят из свойств оформления и значений, записанных с помощью специального синтаксиса таблиц стилей и присвоенных тегам, которые будут наследовать эти стили оформления.
СSS – таблицы каскадных стилей Любому тегу XHTML можно присвоить одну или несколько характеристик оформления, и существуют сотни различных свойств оформления и значений, которые могут использоваться. Большая часть изучения XHTML состоит из изучения этого множества возможностей оформления. Категории стилей оформления включают: стили шрифта - для задания типа шрифта, размера и насыщенности.; стили текста - для задания интервала между буквами и словами, высоты строк, горизонтального и вертикального интервала и абзацных отступов; стили цвета - для задания цвета фона и переднего плана; стили рамок - для вывода различных рамок, окружающих текстовые и графические элементы; стили отступов - для задания ширины различных отступов, окружающих текстовые и графические элементы; стили фильтрации - для применения специальных эффектов к текстовым и графическим элементам; стили задания размера - для задания высоты и ширины текстовых и графических контейнеров; стили позиционирования - для позиционирования элементов страницы в фиксированных пиксельных координатах на странице.
" src="https://present5.com/customparser/45144347_40143767 --- xhtml_i_css.ppt/slide_32.jpg" alt=">Пролог " />
Пролог
" src="https://present5.com/customparser/45144347_40143767 --- xhtml_i_css.ppt/slide_33.jpg" alt=">Тег " />
Тег
Тег
Тег
Колмментарии Комментарии помещают между парой тегов . Эти теги могут окаймлять однострочный комментарий или несколько строк кода XHTML. Любой код или текст, находящийся между этими символами, игнорируется браузером и не выводится на странице. Второй способ комментирования небольшого фрагмента кода HTML состоит в использовании в теге восклицательного знака (!). Этот символ можно задействовать для приостановки вывода целого тега - добавляя его в начале тега, - или одного из его атрибутов - добавляя его перед атрибутом.
Вывести эту" src="https://present5.com/customparser/45144347_40143767 --- xhtml_i_css.ppt/slide_38.jpg" alt="> Вывести эту" />
Вывести эту строку красным цветом.
Параграф (блочный тег)
текст
Между открывающим и закрывающим тегами может находиться любой объем текста. При выводе в браузере вложенный текст содержит только односимвольные пробелы. Перед параграфом и после него следует пустая строка, чтобы отделить от окружающего содержимого страницы.
Отступ для блока текста
Создает отступ для блока текста, чтобы сместить его относительно окружающего содержимого с целью выделени. Этот контейнерный тег смещает вложенный текст на фиксированное число пикселей (примерно на 40) от левого и правого края. Вложенный текст переносится по словам и выделяется пустыми строками перед и после текста. Как и в случае теговтекст
, смежные теги
заменяют предшествующую и последующую пустые строки одной пустой строкой.
Перенос строки
Перенос строки заставляет браузер закончить строку текста и продолжить вывод на следующей строке в окне браузера. Он не создает, как в случае параграфов, пустые строки перед и после законченной строки текста.
Заголовки
Горизонтальная линейка
Тег
вызывает перенос строки и вывод линейки на новой отдельной строке. По умолчанию используется линейка толщиной 2 пикселя и проходящая по всей ширине окна браузера.
Списки Можно создавать списки маркированных элементов, списки нумерованных элементов и списки терминов и определений.
Неупорядоченные списки
- элемент списка
- элемент списка ...
Упорядоченные списки
- элемент списка
- элемент списка ...
Списки определений
- Термин 1
- Текст определения Термина 1
- Термин 2
- Текст определения Термина 2 ...
- и содержит один или несколько тегов
- (definition term), перечисляющих определяемые элементы. С каждым определяемым термином связан тег
- (definition description), содержащий определение термина.
текст ссылки Текстовая ссылка создается с помощью обрамляющего строку тега , называемого" src="https://present5.com/customparser/45144347_40143767 --- xhtml_i_css.ppt/slide_48.jpg" alt=">Ссылки текст ссылки Текстовая ссылка создается с помощью обрамляющего строку тега , называемого" />
Ссылки текст ссылки Текстовая ссылка создается с помощью обрамляющего строку тега , называемого также тегом анкера, - он определяет расположение страницы, с которой происходит соединение. Атрибут href (hypertext reference) определяет адрес URL связанной страницы. Ссылки можно делать с другими страницами на локальном сайте Web или со страницами на удаленных сайтах в любом месте WWW.
Изображения GIF и JPEG размещают на странице Web с помощью" src="https://present5.com/customparser/45144347_40143767 --- xhtml_i_css.ppt/slide_49.jpg" alt=">Изображения
Изображения GIF и JPEG размещают на странице Web с помощью" />
Изображения
Изображения GIF и JPEG размещают на странице Web с помощью линейного тега
. Тег
кодируется на странице Web в том месте, в котором должно выводиться изображение. Атрибут src задает источник или расположение файла изображения. Если файл изображения находится в том же каталоге, что и страница Web, на которой оно выводится, то в качестве URL в src достаточно указать только имя файла. Значение ”text” атрибута alt задает краткое всплывающее описание изображения, когда указатель мыши перемещается поверх изображения. Эта текстовая строка выводится, когда пользователи отключают в браузере вывод графики, задавая тем самым текстовое описание отсутствующих изображений.
Каскадные таблицы стилей Таблица стилей - это набор характеристик стилей оформления и соответствующих значений оформления, описывающих внешний вид элементов XHTML, к которым они применяются. Существует три способа создания таблиц стилей. Линейная (in-line) таблица стилей появляется внутри тега, к которому применяются ее объявления стилей; встроенная (embedded) таблица стилей является отдельным разделом стилей страницы Web, которая применяет свои стили ко всем определяемым на странице тегам; внешняя (linked) таблица стилей является внешним документом, содержащим задания стилей, которые применимы ко всем страницам, которые с ней соединены.
Блочная модель
А это — абзац основного текста.
И еще один абзац основного текста.
Абзац примечания.
Опять абзац основного текста.
И снова абзац примечания.
Тег
Атрибут class нужен для тех же целей, с тем лишь отличием, что одно и то же значение данного атрибута может быть присвоено нескольким элементам.
В листе стилей можно , например, использовать правила следующего вида: div #header {…} – определяет представление элемента
линейные размеры Линейные размеры блочного элемента по умолчанию определяются шириной родительского элемента (по горизонтали) и объемом содержимого (по вертикали), а также зависят от величины полей, отступов и толщины рамки.
Размеры блочных элементов Размеры блочных элементов можно контролировать при помощи свойств width и height. Значением этих свойств м/б величины, заданные с использованием линейных единиц измерения или в процентах, а также ключевое слово auto. По стандарту значения свойств width и height относятся только к размерам содержимого блочного элемента – без учета полей, рамки и отступов. Не все браузеры следуют рекомендациям стандартов. Если существует потребность в том, чтобы размеры какого-бы то нибыло элемента были точными при отображении страницы в любом браузере, один блок, для которого определены нулевые значения величины полей, толщины рамки, выступают в качестве «подложки» для других блоков.
Позиционирование элементов CSS2 предусматривает 4 типа позиционирования блоков, определяемых при помощи свойства position со следующими значениями:
значение по умолчанию static – статическое, элемент размещается «как обычно», в соответствии с нормальным потоком; пример
относительное relative – положение элемента вычисляется в соответствие с нормальным потоком, затем элемент смещается относительно нормального потока на величины, определенные значениями свойств top, bottom, left, right. Следующие элементы в нормальном потоке позиционируются так, как будто бы данный элемент не был смещен. пример
абсолютное absolute – положение (размер) элемента определяется значениями свойств top, bottom, left, right, задающими смещения относительно границ содержимого родительского элемента. Абсолютно позиционированные блоки исключаются из нормального потока, никак не влияя на размещение всех остальных элементов. Если абсолютно позиционированный элемент имеет отступы, определенные свойством margin, то они не перекрываются с отступами других элементов. пример
фиксированнное fixed – расположение элемента рассчитывается по алгоритму, применяемому для схемы absolute, но при этом осуществляется жесткая привязка блока к границам области просмотра или страницы. Т.е. элемент не будет прокручиваться вместе с остальным содержимым окна браузера. пример
обтекание элементов часто при верстке шаблонов страниц используется еще один алгоритм управления взаимным расположением блочных элементов. режим отекания регулируется двумя свойствами: float и clear
обтекание элементов float может иметь два значения left и right – определяет, с какой стороны будет располагаться обтекаемый элемент по отношению к обтекающим. ключевое слово none отменяет действие свойства float. свойство clear запрещает расположение обтекаемых блоков с той или иной стороны от данного элемента, может принимать значения left, right, значение both – обтекаемые элементы запрещены с обеих сторон от данного элемента. Значение none – разрешает размещение обтекаемых блоков с любой стороны