Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:
exam_answers_v3.2_2013.docx
Скачиваний:
0
Добавлен:
01.05.2025
Размер:
3.08 Mб
Скачать

5. Структура html-документа. Определение типа документа. Различия версий html 4.0 и xhtml 1.0. Раздел head, его структура, основные элементы и их назначение. Теги title, link, meta.

HTML документ представляет собой обычный текстовый файл, содержащий маркированный тегами форматирования текст, а так же заданные специальными тегами ссылки на графические и прочие файлы мультимедиа, ссылки на другие документы HTML и ресурсы Internet.

Структура HTML документа:

<!DOCTYPE html> <!—в версии HTML5 -->

<html> (Начало документа)

<head><title>ЗАГОЛОВОК ДОКУМЕНТА</title></head>

<body>ТЕЛО ДОКУМЕНТА</body>

</html> (Конец документа)

Определения типа документа. (Document Type Definition, DTD). Они устанавливают правила и определяют структуры, которые можно использовать в совместимых документах. В HTML 4.0 определены три DTD: строгое (strict – полностью запрещает использование визуальных тегов), свободное (Transitional) и фреймовое (Frameset). Для этого в первую строку описания типа документа включается DTD.

Различия между XHTML и HTML.

  • Все элементы должны быть закрыты. (даже одиночные теги <br />).

  • Булевы атрибуты записываются в развёрнутой форме. Например, следует писать <option selected="selected">

  • Имена тегов и атрибутов должны быть записаны строчными буквами.

  • XHTML гораздо строже относится к ошибкам в коде. По рекомендации W3C браузеры должны сообщать об ошибке и не обрабатывать документ. В HTML же браузер пытается понять что имел в виду автор.

  • Кодировкой по умолчанию является UTF-8 (в отличие от HTML, где кодировкой по умолчанию является ISO 8859-1).

Тег <HEAD> предназначен для хранения элементов, цель которых — помочь браузеру в работе с данными. Содержимое тега <head> не отображается напрямую на веб-странице, за исключением тега <title> устанавливающего заголовок окна веб-страницы.

<title> — определяет заголовок документа.

<link> — устанавливает связь с внешним документом вроде файла со стилями или со шрифтами.

rel — определяет отношения между текущим документом и файлом, на который делается ссылка,

type — MIME-тип данных подключаемого файла.

href — Путь к связываемому файлу,

Например, <link rel="stylesheet" type="text/css" href="ie.css">

<meta> — определяет метатеги, которые используются для хранения информации предназначенной для браузеров и поисковых систем. Например, механизмы поисковых систем обращаются к метатегам для получения описания сайта (description), ключевых слов (keywords) и других данных. Разрешается использовать более чем один метатег. Как правило, параметры любого метатега сводятся к парам «имя=значение», которые определяются аргументами content, name или http-equiv.

Например, <meta name="description" content=" Университет печати - единственный вуз России, осуществляющий подготовку кадров для всего спектра профессий медиаиндустрии, и центр формирования научного и образовательного пространства в этой сфере”>

6. Теги, атрибуты, контейнеры, мнемонические подстановки. Блочные и строчные теги. Теги создания абзацев, заголовков, списков, внутриабзацного выделения, гиперссылок, иллюстраций.

Тег — своеобразный маркер, указывает браузеру какое форматирование к той или иной части документа следует применить. Теги бывают одиночными и парными (контейнеры). Одиночный тег используется самостоятельно, а парный может включать внутри себя другие теги или текст.

<тег параметр1="значение" параметр2="значение"> - одиночный тег

<тег параметр1="значение" параметр2="значение">...</тег> - тег контейнер

У тегов допустимы различные параметры (атрибуты), которые разделяются между собой пробелом. Атрибуты тега задают значения свойств данного объекта или объектов помещенных в контейнер.

Мнемонические подстановки

С клавиатуры можно набрать лишь малую толику используемых символов. Для вставки специального символа в документ используется такая запись: &имя-символа; &nbsp-неразрывный пробел, &amp — &, &gt — >, &lt — <, &copy — © .

В языке HTML все элементы можно разделить на два типа: блочные и строчные. Отображение элемента можно менять с помощью css свойства display и его значений block (блочный), inline (строчный).

Блочные элементы создают визуально самостоятельную структурную единицу — блок(content, border, padding, margin). В общем потоке страницы располагаются один под другим, по одному в каждой строке.

Например: p, div, table, tr, td, form, h1, ol, ul

<p> — тег нового абзаца.

<h1>...<h6> — контейнерные теги шестиуровневых заголовков документа.

<ul> — маркированный список. (type="disc", "circle", "square")

<ol> — нумерованный список. (type="A, a, I, 1")

<li> — элемент списка

Строчные элементы (inline) по определению не имеют верхнего и нижнего отступа. В общем потоке страницы строчные элементы идут друг за другом, то есть в одной строке. На другую же строку они переходят только тогда, когда доходят до конца строки, либо когда что-то принудительно заставляет их перейти на новую строку.

Например: a, code, img, input, span, em, b, i

Теги внутриабзацного выделения:

<span> - контейнер

<sup> — в верхнем индексе

<sub> — в нижнем индексе

<strong>(логич.)=<b>(физич.) - жирное начертание

<em>(логич.)=<i>(физич.) - курсивное начертание

<u> - подчеркивание

<s> - зачеркивание

<align> - выравнивание

Гиперссылки. <a> в зависимости от присутствия параметров name или href тег <a> устанавливает ссылку или якорь. Якорем называется закладка внутри страницы, которую можно указать в качестве цели ссылки.

href ="URL" адрес документа, на который следует перейти

name="1" Устанавливает имя якоря внутри документа <a href="#1">

target — имя окна или фрейма, куда браузер будет загружать документ. (_self-в текущее окно, _blank-в новое, _parent-во фрейм-родитель, _top-отменяет фреймы и загружает в полное окно)

title — всплывающая подсказка

Теги иллюстраций

<img>— для отображения изображений в графическом формате GIF, JPEG или PNG.

src="URL", align, alt-альтернативный текст, border, height, width, hspace, vspace

ismap — говорит браузеру, что картинка является серверной картой-изображением

lowsrc — путь к графическому файлу низкого разрешения для предварительного отображения

usemap — ссылка на тег <map>, содержащий координаты для клиентской карты-изображения.

<img … usemap="#K">

<map name="K">

<area href="" shape="circle, poly, rect" coords="">

<area...>

</map>

7. Теги и атрибуты, используемые для создания таблиц в языке HTML. Объединение ячеек. Особенности таблиц, используемых для вывода табличных данных и для создания каркаса страниц. Преимущества и недостатки верстки страниц с использованием таблиц.

<table> - контейнер для элементов, определяющих содержимое таблицы. Внутри <table> допустимо использовать следующие элементы: <tr> — строка, <td> — ячейка, <caption> — заголовок и др. характеристики колонок, <colgroup>, <tbody>, <tfoot>, <thead> — группировка строк, <th> — заголовочная ячейка с жирным шрифтом по центру.

Для тегов таблицы можно использовать следующие атрибуты: align, background, bgcolor, border, bordercolor, cellpadding (отступ), cellspacing(расстояние между ячейками), cols задает количество столбцов в таблице, помогая браузеру в подготовке к ее отображению, height, width. Но все же лучше оформление делать через таблицы стилей css.

<tr> — контейнер для создания строки таблицы (align, bgcolor, bordercolor, valign)

<td> — для создания одной ячейки таблицы. Должен размещаться внутри контейнера <tr>, который в свою очередь располагается внутри тега <table> (align, background, bgcolor, bordercolor, height, nowrap — запрещает перенос строк, valign, width, colspan — объединяет горизонтальные ячейки, rowspan — объединяет вертикальные ячейки).

Особенности таблиц

Одну таблицу допускается помещать внутрь ячейки другой таблицы. Это требуется для представления сложных данных или в том случае, когда одна таблица выступает в роли модульной сетки, а вторая, внутри нее, уже как обычная таблица.

Размеры таблицы изначально не установлены и вычисляются на основе содержимого ячеек.

Если для таблицы задана ее ширина в процентах или пикселах, то содержимое таблицы подстраивается под указанные размеры.

Преимущества таблиц

Благодаря наличию большого числа параметров, особенно границе нулевой толщины, таблица выступает в роли невидимой модульной сетки, относительно которой добавляется текст, изображения и другие элементы — удобство и широкие возможности верстки.

При изменении размера окна браузера, колонки сохраняют свой исходный вид, а не переносятся как слои друг под друга. К тому же высота разных колонок при использовании таблиц остается одинаковой, независимо от объема их содержимого.

«Резиновый» макет. Таблицы удачно подходят для «резинового» макета, ширина которого привязана к ширине окна браузера. (размер таблицы можно задавать в процентах)

«Склейка» изображений. Рисунки часто разрезают на отдельные фрагменты, а затем собирают их вновь в одно целое, выкидывая одни фрагменты или заменяя их другими изображениями. Это требуется для различных дизайнерских изысков вроде создания эффекта перекатывания, анимации или уменьшения объема файлов.

Фоновые рисунки. За счет этого приема на странице создаются декоративные линии, рамки самого разнообразного вида, добавляется тень под элементом.

Выравнивание элементов. Содержимое ячеек можно одновременно выравнивать по горизонтали и по вертикали, за счет чего расширяются возможности по размещению элементов относительно друг друга и на странице в целом.

Таблицы отображаются в разных браузерах практически одинаково, в отличие от некоторых параметров CSS

Недостатки таблиц.

Долгая загрузка. Пока таблица не загрузится полностью, ее содержимое не начнет отображаться. Дело в том, что браузер, прежде чем показать содержимое таблицы, должен вычислить необходимые размеры ячеек, их ширину и высоту. А для этого необходимо знать, что в этих ячейках находится. Поэтому браузер и ожидает, пока загрузится все, что находится в ячейках, и только потом отображает таблицу.

Громоздкий код.

Плохая индексация поисковиками. За счет того, что текст располагается в отдельных ячейках таблицы, в коде он может находиться достаточно далеко друг от друга. Такая раздробленность информации, а также значительная вложенность тегов затрудняет правильное индексирование страницы поисковыми системами

Нет разделения содержимого и оформления. В идеале HTML-код должен содержать только теги с указанием стилевого класса или идентификатора. Хотя к таблицам стиль легко добавляется, но обилие «лишних» тегов не позволяет действительно просто и удобно управлять видом отдельных компонентов страницы.

Несоответствие стандартам. В последнее время стандарты HTML и CSS прочно засели в умах веб-разработчиков. Этому способствует развитие XHTML и XML, которые более «жестко» относятся к коду документа, появление новых версий браузеров, придерживающихся спецификации, и мода на верстку слоями.

Применение таблиц разумно:

  • для размещения табличных данных

  • когда высота колонок должна быть одинаковой

  • нет времени на сложную верстку

8. Веб-формы как средство обратной связи страницы с веб-сервером. Методы отправки данных, их преимущества и недостатки. Элементы форм - текстовые поля ввода, списки, флажки, радиокнопки.

<form> — устанавливает форму на веб-странице. Форма предназначена для обмена данными между пользователем и сервером. Допускается внутрь контейнера <form> помещать другие теги, при этом сама форма никак не отображается на веб-странице, видны только ее элементы и результаты вложенных тегов.

Атрибуты: action="URL" адрес программы или документа, которые обрабатывает данные формы после ее отправки.

name – имя формы

enctype — MIME-тип информации формы.

autocomplete – автозаполнение формы 'on/off'

target — имя окна или фрейма, куда обработчик будет загружать возвращаемый результат.

method — Метод протокола HTTP. Различают два метода — GET(по умолчанию) и POST.

GET — Этот метод является одним из самых распространенных и предназначен для получения требуемой информации и передачи данных в адресной строке. Пары «имя=значение» присоединяются в этом случае к адресу после вопросительного знака и разделяются между собой амперсандом (символ &). Удобство использования метода GET заключается в том, что адрес со всеми параметрами можно использовать неоднократно, сохранив его, например, в «Избранное» браузера, а также менять значения параметров прямо в адресной строке.

POST — посылает на сервер данные в теле HTTP-запроса браузера. Это позволяет отправлять большее количество данных, чем доступно методу GET, поскольку у него установлено ограничение в 4 Кб. Большие объемы данных используются в форумах, почтовых службах, заполнении базы данных и т.д. Конфиденциальнее, невозможность поставить прямую ссылку.

Элементы формы

<input> позволяет создавать разные элементы интерфейса

атрибут type - позволяет задавать следующие элементы формы: текстовое поле (text), поле с паролем (password), переключатель (radio), флажок (checkbox), скрытое поле (hidden), кнопка (button), кнопка для отправки формы (submit), кнопка для очистки формы (reset), поле для отправки файла (file) и кнопка с изображением (image).

Например, <input type="radio" name="browser" value="ie"> Internet Explorer</input>

<textarea> многострочечное поле ввода

Доступные атрибуты — cols (количество колонок символов, которые умещаются в поле), rows (количество строк символов, которые умещаются в поле), name

<select> выпадающий список

Доступные атрибуты — name, size, multiple – множественный выбор

<select>

<option>сожержимое списка</option>

<option>...</option>

</select>

9. Каскадные таблицы стилей CSS. Способы включения в документ - внешние, внутренние и локальные стили. Синтаксис CSS - селекторы, свойства. Селекторы по элементу, по классу и по ID элемента. Каскадирование.

CSS (Cascading Style Sheets, каскадные таблицы стилей) — это набор параметров форматирования, который применяется к элементам веб-страницы для управления их видом и положением.

Внешние стили. Располагаются в отдельном файле с расширением css, а для связывания документа с этим файлом применяется тег <link>.

<head> <link rel="stylesheet" type="text/css" href="mysite.css"> </head>

Внутренние стили. располагаются в заголовке (head) веб-страницы.

<head> <style type="text/css">

H1 { font-size: 120%; font-family: Verdana, Arial, Helvetica, sans-serif; color: #336; }

</style> </head>

Локальные: является по существу расширением для одиночного тега. Вписываются в атрибут style любого элемента.

<h1 style="font-size: 120%; font-family: Verdana, Arial, Helvetica, sans-serif; color: #336">Заголовок</h1>

Синтаксис CSS.

Селектор { свойство1: значение; свойство2: значение; ... }

Пробелы и абзцы значения не имеют. Важные знаки: : ; { }

Селектор служит как указание на тип объектов, для которого определяются правила форматирования, такие как: цвет, фон, размер и т.д.

* - универсальный селектор — на все элементы

селектор элементов h1, p, div {…}

селекторы потомков p ul {…}

селектор класса .classname {…} к одному классу может принадлежать несколько элементов

идентификатор #idname уникальный для одного элемента

Каскадирование.

Таблицы стилей могут иметь 3 источника происхождения: автор, пользователь, браузер. Таблицы локальные, внутренние, внешние.

Каскадность языка CSS состоит в том, что каждому правилу приписан свой вес, и если к элементу применены несколько правил, то используется правило с наибольшим весом.

Специфичность:

элемент = 1

класс = 10

идентификатор (id) = 100

Свойство !important позволяет увеличить вес определенного правила и обеспечить его применение, независимо от наличия других CSS-выражений. Свойство !important применяют тогда, когда надо гарантировать, что форматирование будет выполнено в любых условиях.

‹style› p {color: blue !important} ‹/style›

Соседние файлы в предмете [НЕСОРТИРОВАННОЕ]