Лаб 1 (Лабораторный практикум)
Описание файла
Файл "Лаб 1" внутри архива находится в папке "Лабораторный практикум". PDF-файл из архива "Лабораторный практикум", который расположен в категории "". Всё это находится в предмете "языки интернет-программирования" из 5 семестр, которые можно найти в файловом архиве МГТУ им. Н.Э.Баумана. Не смотря на прямую связь этого архива с МГТУ им. Н.Э.Баумана, его также можно найти и в других разделах. Архив можно найти в разделе "лабораторные работы", в предмете "языки интернет-программирования" в общих файлах.
Просмотр PDF-файла онлайн
Текст из PDF
Методические указания к выполнениюлабораторной работы и практикума №1по курсу «Языки Интернет-программирования»Создание простейших HTML-страниц, валидаторы кода.Таблицы стилей CSS.Самарев Роман Станиславовичканд. техн. наук, доцентsamarev@acm.orgкаф. ИУ-6 «Компьютерные системы и сети»Москва 2013ОглавлениеЦель работы .................................................................................................................
3Введение ....................................................................................................................... 4Архитектура WWW. Сетевое взаимодействие .................................................... 4Некоторые сведения о SGML, XML ..................................................................... 6Часть 1. Общие сведения о HTML, XHTML. Основные элементы разметки ...... 8Структура HTML разметки ....................................................................................
9Основные элементы разметки ............................................................................. 10Элемент html ...................................................................................................... 10Элемент head......................................................................................................
10Элемент body ..................................................................................................... 11Некоторые элементы разметки текста ............................................................ 11Вставка изображений ............................................................................................ 13Вставка ссылок ...................................................................................................... 13Разметка таблиц..................................................................................................... 13Элементы разметки блоков .................................................................................. 15Формы ....................................................................................................................
16Устаревшие элементы форматирования ............................................................. 18Использование валидаторов HTML и CSS ......................................................... 19Часть 2. Cascading Style Sheets (CSS) ...................................................................... 23Селекторы .............................................................................................................. 23Шрифты ..................................................................................................................
24Цвет......................................................................................................................... 27Фон.......................................................................................................................... 27Преобразование текста ......................................................................................... 29Блочная модель...................................................................................................... 29Отступы и границы ........................................................................................... 30Позиционирование ............................................................................................
31Макеты. Размещение элементов по колонкам, замена фреймов и таблиц . 36Отладка CSS в браузере Firefox ........................................................................... 39Литература ................................................................................................................. 42Задание к части 1 ....................................................................................................... 43Задание к части 2 .......................................................................................................
44Контрольные вопросы .............................................................................................. 45Требования к отчету.................................................................................................. 462Цель работыЦелью работы является получение практических навыков создания иформатирования HTML-страниц с использованием устаревших и современныхсредств разметки.3ВведениеWorld Wide Web (WWW, Web или Веб) – информационное пространство, вкотором элементы, называемые ресурсами, адресуются глобальнымиидентификаторами, которые называются унифицированными идентификаторамресурсов - Uniform Resource Identifiers (URI).Веб-агентом называют человека или программу, осуществляющую некоторуюдеятельность в этом информационном пространстве.
При этом агентпользователя, являющийся одним из типов веб-агентов, действует от лицапользователя.Архитектура WWW. Сетевое взаимодействиеВыделяют три составляющих архитектуры Web – идентификация,взаимодействие и форматы.1Идентификация. URI используются как идентификаторы ресурсов иопределены в спецификации RFC 3986 “ Uniform Resource Identifier (URI):Generic Syntax ”. В соответствии с этим документом, URI имеет следующийформат:foo://example.com:8042/over/there?name=ferret#nose\_/\______________/\_________/\_________/ \__/|||||schemeauthoritypathqueryfragment|_____________________|__/ \ /\urn:example:animal:ferret:noseURI является развитием URL и, в соответствии с RFC 3986, может содержатьURL или URN.URL — (англ.
Uniform Resource Locator) определяет адрес узла сетевогоресурса и путь к нему.URN — (англ. Uniform Resource Name), определяет глобальное неизменное имяресурса независимо от его расположения.Примеры:URI(URL) http://ru.wikipedia.org/w/index.php?title=URI&stable=0#.D0.9E.D1.81.D0.BD.D0.BE.D0.B2.D1.8BURI(URL) ftp://ftp.dlink.ru/pub/ADSL/URI urn:ISBN:0-395-36341-11http://www.w3.org/TR/2004/REC-webarch-20041215/ - Architecture of the World Wide Web, Volume OneW3C Recommendation 15 December 20044В последнем случае URI состоящий только из URN, который указывает наресурс (книгу) 0-395-36341-1 в пространстве имён ISBN, предполагается чтоузел известен по умолчаниюВ дальнейшем предлагается использовать термин URI, который состоит из:<схема>://<логин>:<пароль>@<узел>:<порт>/< путь>?<параметры>#<якорь>В этой записи: схема - схема обращения к ресурсу; в большинстве случаев имеется ввиду сетевой протокол (http, https, ftp, ntp, rfb…).
При этом urn такжеявляется схемой. логин - имя пользователя, используемое для доступа к ресурсу. пароль - пароль указанного пользователя. узел - полностью прописанное доменное имя узла в системе DNS или IPадрес узла. порт - IP-порт для подключения к сервису. путь - уточняющая информация о месте нахождения ресурса; зависит отпротокола. параметры - строка запроса с передаваемыми на сервер (методом GET)параметрами.
Разделитель параметров — знак &. Пример:?параметр_1=значение_1&параметр_2=значение_2&параметр3=знач_3 якорь - идентификатор «якоря», ссылающегося на некоторую часть(раздел) открываемого документа.Взаимодействие. Веб-агенты взаимодействуют посредствомстандартизованных протоколов, обеспечивающих передачу сообщений иданных. Сетевые протоколы Веб, такие как HTTP, FTP, SOAP, NNTP, и SMTP,основаны на обмене сообщениями. Сообщение может включать метаданные оресурсе (например заголовки HTTP), данные сообщения и сообщение кактаковое (например в разделе "Transfer-encoding" заголовка HTTP). Веб-агентымогут использовать URI для доступа к ресурсу, на который он ссылается, иэтот процесс называется разыменованием URI.
Далее возможен доступразличными способами в зависимости от протокола. Например для протоколаHTTP это может быть запрос представления ресурса (команды HTTP GET илиHEAD), добавление или модификация представления ресурса (команды HTTPPOST или PUT) или удаление некоторых или всех представлений ресурса(команда HTTP DELETE). Поскольку URI содержит указание протоколаФорматы. Форматы данных (например XHTML, RDF/XML, SMIL, XLink, CSS,PNG) реализуют соглашение о представлении данных.
Первым форматомданных в Веб был HTML. Со времени появления Веб число форматовсущественно увеличилось, однако не существует формального ограничения на5количество форматов. Любой разработчик имеет возможность создать свойформат, но это должно быть тщательно обосновано.Некоторые сведения о SGML, XMLФормат SGML(Standard Generalized Markup Language), разработанорганизацией Open GIS Consortium и стандартизован ISO: «ISO 8879:1986Information processing—Text and office systems—Standard Generalized MarkupLanguage (SGML)»Изначально SGML был разработан для совместного использования машинночитаемых (т.е.
чётко структурированных) документов в большихправительственных и аэрокосмических проектах. Он широко использовался впечатной и издательской сфере, но его сложность затруднила его широкоераспространение для повседневного использования.Основные части документа SGML: SGML-декларация — определяет, какие символы и ограничители могутпоявляться в приложении; Document Type Definition — определяет синтаксис конструкцийразметки. DTD может включать дополнительные определения, такие, каксимвольные ссылки-мнемоники; Спецификация семантики, относится к разметке — также даётограничения синтаксиса, которые не могут быть выражены внутри DTD; Содержимое SGML-документа — по крайней мере, должен бытькорневой элемент.DTD (Document Type Definition — определение типа документа) — языкописания структуры SGML- (и в частности XML)-документа.
Разработан длятого, чтобы обеспечить возможность формальной проверки правильностиструктуры любого составленного документа в соответствии с заданной схемой.Спецификация в формате DTD считается устаревшей по ряду причин:1. используется отличный от XML синтаксис.2. отсутствие типизации узлов.Несмотря на то, что DTD еще применяется, ему на смену пришел стандартконсорциума W3C XML Schema.Пример очень простого XML DTD, описывающего список людей:<!ELEMENT people_list (person*)><!ELEMENT person (name, birthdate?, gender?, socialsecuritynumber?)><!ELEMENT name (#PCDATA) ><!ELEMENT birthdate (#PCDATA) >6<!ELEMENT gender (#PCDATA) ><!ELEMENT socialsecuritynumber (#PCDATA) >Начиная с первой строки:Элемент <people_list> элемент содержит любое число элементов <person> .Знак <*> означает что возможно 0, 1 или более элементов <person> внутриэлемента <people_list>.Элемент <person> содержит элементы <name>, <birthdate>, <gender> и<socialsecuritynumber>.