Что такое домен и доменное имя?
Домен - определенная зона в системе доменных имён (DNS) Интернет, выделенная какой-либо стране, международной организации, региону, юридическому или физическому лицу для целей обеспечения доступа к предоставляемой им в Интернете информации. Примеры доменов: .edu, .ru, .com, .org, .net и т.д.
Доменое имя - в системе DNS символьная строка, состоящая из имени домена ([и субдоменов]) и имени хоста в этом домене, сопоставленная с сетевым адресом этого хоста. Примеры доменных имен: example.com, test.example.com, test.test.example.com.
Что такое URL?
Для доступа к любым сетевым ресурсам необходимо знать где они размещены и как к ним можно обратиться. Во Всемирной паутине используется стандартизованная схема адресации и идентификации, учитывающую опыт адресации и идентификации e-mail, Gopher, WAIS, telnet, ftp и т.п. - URL, Uniform Resource Locator.
URL (Uniform Resource Locator, RFC 1738) - унифицированный локатор (указатель) ресурсов, стандартизированный способ записи адреса ресурса в WWW и сети Интернет. Адрес URL имеет гибкую и расширяемую структуру для максимально естественного указания местонахождения ресурсов в сети. Для представления адреса используется ограниченный набор символов ASCII. Общий вид адреса можно представить так:
<схема>://<логин>:<пароль>@<хост>:<порт>/<полный-путь-к-ресурсу>
Где:
схема | схема обращения к ресурсу: http, ftp, gopher, mailto, news, telnet, file, man, info, whatis, ldap, wais и т.п. |
логин:пароль | имя пользователя и его пароль, используемые для доступа к ресурсу |
хост | доменное имя хоста или его IP-адрес. |
порт | порт хоста для подключения |
полный-путь-к-ресурсу | уточняющая информация о месте нахождения ресурса (зависит от протокола). |
Примеры URL:
|
|
http://example.com | #запрос стартовой страницы по умолчанию |
http://www.example.com/site/map.html | #запрос заданной страницы в указанном каталоге |
http://example.com:81/script.php | #подключение на нестандартный порт |
http://example.org/script.php?key=value | #запрос с передачей параметров скрипту |
ftp://user:pass@ftp.example.org | #подключение к ftp-серверу с авторизацией |
http://192.168.0.1/example/www | #подключение по сетевому адресу |
file:///srv/www/htdocs/index.html | #открытие локального файла |
gopher://example.com/1 | #подключение к серверу gopher |
Лекция 2. Язык разметки гипертекста HTML
(2-3 неделя, 2 часа)
Язык разметки гипертекста
HTML (HyperText Markup Language) — язык разметки гипертекста, предназначенный для создания веб-страниц.
HTML представляет простые правила оформления и компактный набор структурных и семантических элементов разметки (тегов), которые позволяют создавать веб-страницы разной сложности. HTML позволяет описывать способ представления логических частей документа (заголовки, абзацы, списки и т.д.). Изначально язык HTML был задуман и создан как средство структурирования и форматирования документов без привязки к средствам отображения. В идеале, гипертекстовый документ должен одинаково выглядеть на различных устройствах (монитор ПЭВМ, экран ПДА или мобильного телефона, принтер, медиа-проектор и т.п.).
|
|
HTML не является языком программирования, но веб-страницы могут содержать встроенные или загружаемые программы на скриптовых языках (в первую очередь Javascript) и программы-апплеты на языке Java.
Версии HTML
Разработкой спецификаций языка HTML и утверждением их в качестве официальных стандартов занимается Консорциум всемирной паутины (W3C). Помимо W3C, в развитии языка участвуют IT-компании и сообщество разработчиков.
• Официальной спецификации HTML 1.0 не существует. До 1995 года существовало множество неофициальных спецификаций HTML, появившихся в ходе браузерных войн.
• RFC 1866 — HTML 2.0, одобренный как официальный стандарт 22 сентября 1995 года;
• HTML 3 (март 1996) - не нашла поддержки у разработчиков
• HTML 3.2 — 14 января 1997 года;
HTML 4.0 — 18 декабря 1997 года (многие унаследованные элементы были отмечены как устаревшие и
• нерекомендованные к использованию (англ. deprecated).);
• HTML 4.01 — 24 декабря 1999 года (версия включала малозаметные, но существенные изменения по сравнению с предыдущей);
|
|
• ISO/IEC 15445:2000 (ISO HTML, основан на HTML 4.01 Strict) — 15 мая 2000 года.
• HTML 5 — с 2004 года в разработке (W3C совместно с сообществом WHATWG).
Перспективы
С 2004 г W3C разрабатывает HTML версии 5. Черновой вариант спецификации языка появился в Интернете 20 ноября 2007 года. Параллельно ведётся работа по дальнейшему развитию HTML под названием XHTML (англ. extensible Hypertext Markup Language — «расширяемый язык разметки гипертекста»). Пока XHTML по своим возможностям сопоставим с HTML, однако предъявляет более строгие требования к синтаксису. Как и HTML, XHTML является подмножеством языка SGML, однако XHTML, в отличие от предшественника, основан на XML. Вариант XHTML 1.0 был одобрен в качестве Рекомендации Консорциума всемирной паутины 26 января 2000 года.
Планируемая спецификация XHTML 2.0 разрывает совместимость со старыми версиями HTML и XHTML, что не очень устраивает некоторых веб-разработчиков и производителей браузеров. Группой WHATWG (англ. Web Hypertext Application Technology Working Group) разрабатывается спецификация Web Applications 1.0, часто неофициально называемая «HTML 5», которая расширяет HTML (впрочем, имея и совместимый с XHTML 1.0 XML-синтаксис) для лучшего представления семантики различных типичных страниц, например форумов, сайтов аукционов, поисковых систем, онлайн-магазинов и т.д., которые не очень удачно вписываются в модель XHTML 2.
|
|
Элементы гипертекста
Структура HTML-документа
HTML-документ состоит из текста, который представляет собой информационное содержимое и специальных средств языка HTML — тегов разметки, которые определяют структуру и внешний вид документа при его отображении браузером. Структура HTML-документа (рис. 1) довольно проста:
1. Описание документа начинается с указания его типа (секция DOCTYPE).
2. Текст документа заключается в тег <html>. Текст документа состоит из заголовка и тела, которые выделяются соответственно тегами <head> и <body>.
o В заголовке (<head>) указывают название HTML-документа и другие параметры, которые браузер будет использовать при отображении документа.
o Тело документа (<body>) — это та часть, в которую помещается собственно содержимое HTML-документа. Тело включает предназначенный для отображения текст и управляющую разметку документа (теги), которые используются браузером.
Наличие секции DOCTYPE позволяет указать браузеру, какой тип документа ему предстоит разбирать, т.е, какие требования нужно выполнять при обработке гипертекста.
Заголовок предназначен для размещения метаинформации, описывающей веб-документ как таковой.
Блок <body> содержит то, что нужно показать пользователю: текст, изображения, внедренные объекты и пр.
В листинге 1 приведен простой пример html-разметки
<!DOCTYPE HTML PUBLIC веб-страницы
"-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251">
<title>Почему откровенна веданта?</title>
</head>
<body>
<h1>Почему Откровенна Веданта?</h1>
<h2>Трактат о амбивалентности бытия, сомнениях и адживике</h2>
<p>Философия нетривиальна и это не умозаключение, а плод переработки бытийного. Моцзы, Сюнъцзы и др. считали, что сомнение естественно понимает под собой гений, изменяя привычную реальность. Отношение к современности, как принято считать, непредсказуемо, а созерцание, конечно, транспонирует гравитационный парадокс, ломая рамки привычных представлений. Позитивизм преобразует дуализм, не учитывая мнения авторитетов. Можно предположить, что вещь в себе представляет собой типичный здравый смысл, учитывая опасность, которую представляли собой писания Дюринга. При этом буквы А, В, I, О символизируют соответственно суждения:</p>
<ul>
<li>общеутвердительное; </li>
<li>общеотрицательное;</li>
<li>частноутвердительное;</li>
<li>частноотрицательное.</li>
</ul>
<p>Структурализм, как принято считать, подчеркивает закон исключённого третьего, открывая новые горизонты. Адживика преобразует неоднозначный предмет деятельности, tertium non datur. Согласно предыдущему, дуализм оспособляет примитивный бабувизм, ломая рамки привычных представлений. Наряду с этим вещь в себе дискредитирует сенсибельный принцип восприятия.</p>
<p>В целом, представляется логичным, что адживика трансформирует субъективный гедонизм, тогда как бабувизм контролирует предмет деятельности, tertium поп datur.</p> </body>
</html>
DOCTYPE
Секция DOCTYPE указывает браузеру тип документа и версию использованного языка разметки. Здесь также указывается название и область видимости описания этого языка и адрес файла dtd (document type definition).
Примеры DOCTYPE:
• <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org /TR/html4/frameset.dtd">
Гипертекстовый документ в формате HTML 4.01, содержащий фреймы.
• <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4 /strict.dtd">
Гипертекстовый документ в формате HTML 4.01 со строгим синтаксисом (т.е. не использованы устаревшие и не рекомендованные теги).
• <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org /TR/html4/loose.dtd">
Гипертекстовый документ в формате HTML 4.01 с нестрогим («переходным») синтаксисом (т.е. использованы устаревшие или не рекомендованные теги и атрибуты).
• <!DOCTYPE HTML>
Пока не стандартизованное объявление для документов HTML5.
Стандарт требует, чтобы секция DOCTYPE присутствовала в документе, т.к. это позволяет ускорить и улучшить обработку гипертекста. Это достигается за счет того, что браузер может не делать предположений о том, как интерпретировать теги, а свериться со стандартным определением (файлом .dtd). Подробное описание DOCTYPE — на сайте Консорциума W3C.
Мета-теги
Мета-тег HTML — это элемент разметки html, описывающий свойства документа как такового (метаданные). Назначение мета-тега определяется набором его атрибутов, которые задаются в теге <meta>.
Мета-теги размещают в блоке <head>...</head> веб-страницы. Они не являются обязательными элементами, но могут быть весьма полезны.
Пример описания метаданных:
<head>
<meta name="author" content="cTpoKa"> - автор веб-документа
<meta name="date" content='^aTa"> - дата последнего изменения веб-страницы
<meta name="copyright" content="строка"> — авторские права
<meta name="keywords" content="строка"> — список ключевых слов
<meta name="description" content="строка"> — краткое описание (реферат)
<meta name="ROBOTS" content="NOINDEX, NOFOLLOW"> — запрет на индексирование
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> — тип и кодировка
<meta http-equiv="expires" content="число"> — управление кэшированием
<meta http-equiv="refresh" content="число; URL=адрес"> — перенаправление
</head>
Теги
Тег (html-тег, тег разметки) — управляющая символьная последовательность, которая задает способ отображения гипертекстовой информации.
HTML-тег состоит из имени, за которым может следовать необязательный список атрибутов. Весь тег (вместе с атрибутами) заключается в угловые скобки <>:
<имя_тега [атрибуты]>
Как правило, теги являются парными и состоят из начального и конечного тегов, между которыми и помещается информация. Имя конечного тега совпадает с именем начального, но перед именем конечного тега ставится косая черта / (<html>...</html>). Конечные теги никогда не содержат атрибутов. Некоторые теги не имеют конечного элемента, например тег <img>. Регистр символов для тегов не имеет значения.
Примеры часто используемых тегов HTML:
<html>...</html> - контейнер гипертекста <head>...</head> - контейнер заголовка документа
<title>...</title> — название документа (то, что отображается в заголовке окна браузера) <body>...</body> — контейнер тела документа
<div>...</div> — контейнер общего назначения (структурный блок)
<hN>...</hN> — заголовок N-ного уровня (N = 1...6)
<p>...</p> — основной текст
<a>...</a> — гиперссылка
<ol>...</ol> — нумерованный список
<ul>...</ul> — маркированный список
<li>...</li> — элемент списка
<table>...</table> — контейнер таблицы
<tr>...</tr> — строка таблицы
<td>...</td> — ячейка таблицы
<img>...</img> — изображение
<form>...</form> — форма
<i>...</i> — отображение текста курсивом
<b>...</b> — отображение текста полужирным шрифтом
<em>...</em> — выделение (курсивом)
<strong>...</strong> — усиление (полужирным шрифтом)
<br> — принудительный разрыв строки
Примечание: Браузеры обычно лояльно относятся к отсутствию конечных тегов у парных элементов и более-менее правильно отображают парные элементы уровня блока (p, li и т.п.), особенно в простых веб-документах. Тем не менее, рекомендуется следить за наличием закрывающих тегов и использовать их, чтобы избежать ошибок при воспроизведении документа.
Полный список тегов можно найти в документации на соответствующую версию языка HTML (см., например HTML 3.2. HTML 4.01. XHTML 1.1 и др.).
Атрибуты
Атрибуты — это пары вида «свойство = значение», уточняющие представление соответствующего тега:
<тег атрибут="значение">...</тег>
Атрибуты указывают в начальном теге, несколько атрибутов разделяют одним или несколькими пробелами, табуляцией или символами конца строки. Значение атрибута, если таковое имеется, следует за знаком равенства, стоящим после имени атрибута. Порядок записи атрибутов в теге не важен. Если значение атрибута — одно слово или число, то его можно просто указать после знака равенства, не выделяя дополнительно. Все остальные значения необходимо заключать в кавычки, особенно если они содержат несколько разделенных пробелами слов.
Примечание: Несмотря на необязательность кавычек, их все же стоит всегда использовать.
Гиперссылки
Гиперссылка - это особым образом помеченный фрагмент веб-страницы (текст, изображение и др.), который связан с другим документом. Для указания гиперссылок используется тег <a>. Гиперссылки позволяют перемещаться между связанными веб-страницами.
<a href="http://example.com/">Пример</a>
<a href="ftp://example.com/archive.tar.gz">Скачать файл<^>
<a href="mailto://user@mail.example.com" title="Обратная связь">user@mail.example.com</a>
Переход по ссылкам можно выполнять как на целые документы, так и на специальным образом помеченные (именованные) фрагменты текста:
<a name="якорь">Привязка к фрагменту текста<^>
<a href="#якорь">Ссылка на якорь<^>
Ссылки могут быть абсолютными и относительными.
Абсолютные ссылки указывают, как правило, на внешний ресурс. Для них нужно указывать полный путь:
<a href="http://example.com/page.html">Абсолютная ссылка</a>
<a href="http://example.com/images/figure1.gif">Ссылка на страницу в каталоге<^>
Относительные ссылки, напротив, используют для перехода на внутренние страницы сайта. Для них нужно указывать путь относительно ссылающейся страницы:
<a href="/index.html">Ссылка на страницу в корневом каталоге<^>
<a href="page.html#seg1">Ссылка на фрагмент страницы в текущем каталоге<^> <a href="images/figure1.gif">Ссылка на страницу в подкаталоге текущего каталога<^>
<a href="/docs/manual.html">Ссылка на страницу в подкаталоге корневого каталога<^>
<a href="../files/index.html">Ссылка на страницу в вышележащем каталоге </a>
Лекция 3. Разделение содержания и оформления (CSS)
(4-5 неделя, 2 часа)
CSS (англ. Cascading Style Sheets — каскадные таблицы стилей) — технология описания внешнего вида документа, оформленного языком разметки.
Преимущественно используется как средство оформления веб-страниц в формате HTML и XHTML, но может применяться с любыми видами документов в формате XML, включая SVG и XUL.
Каскадные таблицы стилей используются создателями веб-страниц для задания цветов, шрифтов, расположения и других аспектов представления веб-документа. Основной целью разработки CSS являлось разделение содержимого (написанного на HTML или другом языке разметки) и оформления документа (написанного на CSS). Это разделение может увеличить доступность документа, предоставить большую гибкость и возможность управления его представлением, а также уменьшить сложность и повторяемость в структурном содержимом. Кроме того, CSS позволяет представлять один и тот же документ в различных стилях или методах вывода, таких как экранное представление, печать, чтение голосом (специальным голосовым браузером или программой чтения с экрана), или при выводе устройствами, использующими шрифт Брайля.
Что такое CSS?
Каскадные таблицы стилей (Cascading Style Sheets, CSS) — это стандарт, определяющий представление данных в браузере. Если HTML предоставляет информацию о структуре документа, то таблицы стилей сообщают как он должен выглядеть.
Стиль — это совокупность правил, применяемых к элементу гипертекста и определяющих способ его отображения. Стиль включает все типы элементов дизайна: шрифт, фон, текст, цвета ссылок, поля и расположение объектов на странице.
Таблица стилей — это совокупность стилей, применимых к гипертекстовому документу.
Каскадирование — это порядок применения различных стилей к веб-странице. Браузер, поддерживающий таблицы стилей, будет последовательно применять их в соответствии с приоритетом: сначала связанные, затем внедренные и, наконец, встроенные стили. Другой аспект каскадирования — наследование (inheritance), — означает, что если не указано иное, то конкретный стиль будет применен ко всем дочерним элементами гипертекстового документа. Например, если вы примените определенный цвет текста в теге <div>, то все теги внутри этого блока будут отображаться этим же цветом.
Использование каскадных таблиц дает возможность разделить содержимое и его представление и гибко управлять отображением гипертекстовых документов путем изменения стилей.
Официальная информация о спецификации Cascading Style Sheets всегда доступна по адресу http://www.w3.org/Style/CSS/
Дата добавления: 2018-02-28; просмотров: 340; Мы поможем в написании вашей работы! |
Мы поможем в написании ваших работ!