Вопросы для подготовки к рубежному контролю № 1. 7 неделя.
advertisement
Вопросы для подготовки к рубежному контролю № 1. 7 неделя.
1. Структура HTML документа.
После объявления версии и типа документа необходимо обозначить его
начало и конец. Это делается с помощью тега-контейнера <HTML>.
Необходимо отметить, что любой HTML-документ открывется тегом
<HTML> и им же закрывается.
Затем, между тегами <HTML> и </HTML> следует разместить
заголовок и тело документа. Вот и все! Начало положено – вы получили
прекрасную заготовку. Вот как должен выглядеть ваш базовый HTML-файл
перед началом работы:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<HTML>
<HEAD>
<TITLE>Заголовок документа</TITLE>
</HEAD>
<BODY>
Текст документа
</BODY>
</HTML>
Из схемы видно, что документ состоит из двух основных блоков –
"заголовка" и "тела документа". Заголовок определяется с помощью элемента
HEAD, а тело – элементом BODY.
Заголовок содержит "техническую" информацию о документе, хотя
чаще всего используется только для обозначения его названия (см. элемент
TITLE).
Тело документа – святая святых. Именно в нем находится все то, что
отображается на странице: текст, картинки, таблицы. Соответственно, делаем
вывод: большинство ваших HTML-экспериментов будет проводиться в
пространстве между тегами <BODY> и </BODY>
2. HTML тэги общие правила.
Для тегов любого типа действуют определенные правила их
использования. Причем, некоторые правила обязательны для выполнения, а
другие являются рекомендациями, т.е. их можно выполнять, а можно и нет.
Согласно спецификации HTML все значения атрибутов тегов следует
указывать в двойных ("пример") или одинарных кавычках ('пример').
Теги можно писать как прописными, так и строчными символами.
Любые теги, а также их атрибуты нечувствительны к регистру, поэтому вы
вольны выбирать сами, как писать — <BR>, <Br> или <br>.
Внутри тега между его атрибутами допустимо ставить перенос строк.
Существует определенная иерархия вложенности тегов. Например, тег
<title> должен находиться внутри контейнера <head> и нигде иначе. Чтобы
не возникло ошибки, следите за тем, чтобы теги располагались в коде
правильно.
Если теги между собой равноценны в иерархии связи, то их
последовательность не имеет значения. Так, можно поменять местами теги
<title> и <meta>, на конечном результате это никак не скажется.
Закрывайте все теги. Существует три состояния закрывающего тега:
обязателен, не требуется или не обязателен. Обязательный закрывающий тег
должен присутствовать всегда, иначе это приведет к ошибке при
отображении документа. Для некоторых тегов вроде <br> закрывающего тега
нет в принципе. Необязательный закрывающий тег говорит о том, что
разработчик может его как добавить, так и опустить, к ошибке это не
приведет.
3. Заголовки, текст, абзац, блоки, списки, таблицы, изображения, ссылки.
Заголовки выполняют важную функцию на веб-странице. Во-первых,
они показывают важность раздела, к которому относятся. Чем больше
заголовок и его «вес», тем более он значимый. Во-вторых, с помощью
различных заголовков легко регулировать размер текста. Чем выше уровень
заголовка, тем больше размер шрифта. Самым верхним уровнем является
уровень 1 (<h1>), а самым нижним — уровень 6 (<h6>). И, в-третьих,
поисковики добавляют рейтинг тексту, если он находится внутри тега
заголовка.
HTML текст является основной составляющей большинства страниц
интернета.
По ключевым фразам в тексте HTML-страницы пользователи могут
найти ваш сайт.
HTML текст может быть любого размера и цвета, по вашему
усмотрению. Вы также можете определить вид шрифта и его объемность.
HTML размер шрифта обыкновенно устанавливается в пикселях.
HTML форматирование текста широко распространено, применяются
форматирующие теги.
Смотрите ниже теги, форматирующие HTML текст:
Теги <strong> </strong> → жирный HTML текст (жирный шрифт).
Теги <b> </b> → жирный HTML текст (жирный шрифт).
Теги <kbd> </kbd>
→
моноширинный HTML текст (моноширинный
шрифт).
Теги <code> </code> → моноширинный HTML текст (моноширинный
шрифт).
Теги <samp> </samp> → моноширинный HTML текст (моноширинный
шрифт).
Теги <big> </big> → HTML текст, размер больше обычного (крупный
шрифт).
Теги <small> </small> → HTML текст, размер меньше обычного (мелкий
шрифт).
Теги <em> </em> → наклонный HTML текст (наклонный шрифт).
Теги <i> </i> → наклонный HTML текст (наклонный шрифт).
Теги <dfn> </dfn> → наклонный HTML текст (наклонный шрифт).
Теги <ins> </ins> → подчеркнутый HTML текст (подчеркнутый шрифт).
Теги <del> </del> → зачеркнутый HTML текст (зачеркнутый шрифт).
Теги <sub> </sub> → HTML текст (шрифт) в нижнем индексе.
Теги <sup> </sup> → HTML текст (шрифт) в верхнем индексе.
Как правило, блоки текста разделяют между собой абзацами
(параграфами). По умолчанию между параграфами существует небольшой
вертикальный отступ, называемый отбивкой. Синтаксис создания абзацев
следующий.
<p>Абзац 1</p>
<p>Абзац 2</p>
Каждый абзац начинается с тега <p> и заканчивается необязательным
закрывающим тегом </p>.
Элемент <div> является блочным элементом и предназначен для
выделения фрагмента документа с целью изменения вида содержимого. Как
правило, вид блока управляется с помощью стилей.
Как и при использовании других блочных элементов, содержимое тега
<div> всегда начинается с новой строки. После него также добавляется
перенос строки.
Списком называется взаимосвязанный набор отдельных фраз или
предложений, которые начинаются с маркера или цифры. Списки
предоставляют возможность упорядочить и систематизировать разные
данные и представить их в наглядном и удобном для пользователя виде.
Любой список представляет собой контейнер <ul>, который
устанавливает маркированный список, или <ol>, определяющий список
нумерованный. Каждый элемент списка должен начинаться с тега <li>.
Таблица состоит из строк и столбцов ячеек, которые могут содержать
текст и рисунки. Обычно таблицы используются для упорядочения и
представления данных, однако возможности таблиц этим не ограничиваются.
C помощью таблиц удобно верстать макеты страниц, расположив нужным
образом фрагменты текста и изображений.
Для добавления таблицы на веб-страницу используется тег <table>.
Этот элемент служит контейнером для элементов, определяющих
содержимое таблицы. Любая таблица состоит из строк и ячеек, которые
задаются соответственно с помощью тегов <tr> и <td>. Таблица должна
содержать хотя бы одну ячейку. Допускается вместо тега <td> использовать
тег <th>. Текст в ячейке, оформленной с помощью тега <th>, отображается
браузером шрифтом жирного начертания и выравнивается по центру ячейки.
В остальном, разницы между ячейками, созданными через теги <td> и <th>
нет.
Добавление изображения происходит в два этапа: вначале готовится
графический файл желаемого размера, затем он добавляется на страницу
через тег <img>. Сам HTML предназначен только для того, чтобы отобразить
требуемую картинку, при этом никак ее не меняя.
При подготовке изображений следует учесть несколько моментов:
Поскольку веб-страница загружается по сети, существенным фактором
выступает объем графического файла, встроенного в документ. Чем он
меньше, тем быстрее отобразится изображение.
Размер картинки необходимо ограничить по ширине, например,
установить не более 800 пикселов. Иначе изображение целиком не
поместится в окне браузера, и появятся полосы прокрутки.
Ссылки являются основой гипертекстовых документов и позволяют
переходить с одной веб-страницы на другую. Особенность их состоит в том,
что сама ссылка может вести не только на HTML-файлы, но и на файл
любого типа, причем этот файл может размещаться совсем на другом сайте.
Главное, чтобы к документу, на который делается ссылка, был доступ.
Иными словами, если путь к файлу можно указать в адресной строке
браузера, и файл при этом будет открыт, то на него можно сделать ссылку.
Для создания ссылки необходимо сообщить браузеру, что является
ссылкой, а также указать адрес документа, на который следует сделать
ссылку. Оба действия выполняются с помощью тега <a>. Общий синтаксис
создания ссылок следующий.
<a href="URL">текст ссылки</a>
Атрибут href определяет URL (Universal Resource Locator,
универсальный указатель ресурса), иными словами, адрес документа, на
который следует перейти, а содержимое контейнера <a> является ссылкой.
Текст, расположенный между тегами <a> и </a>, по умолчанию становится
синего цвета и подчеркивается.
4. Формы в HTML документе
Тег <form> устанавливает форму на веб-странице. Форма
предназначена для обмена данными между пользователем и сервером.
Область применения форм не ограничена отправкой данных на сервер, с
помощью клиентских скриптов можно получить доступ к любому элементу
формы, изменять его и применять по своему усмотрению.
Документ может содержать любое количество форм, но одновременно
на сервер может быть отправлена только одна форма. По этой причине
данные форм должны быть независимы друг от друга.
Для отправки формы на сервер используется кнопка Submit, того же
можно добиться, если нажать клавишу Enter в пределах формы. Если кнопка
Submit отсутствует в форме, клавиша Enter имитирует ее использование.
Когда форма отправляется на сервер, управление данными передается
программе, заданной атрибутом action тега <form>. Предварительно браузер
подготавливает информацию в виде пары «имя=значение», где имя
определяется атрибутом name тега <input>, а значение введено
пользователем или установлено в поле формы по умолчанию.
Допускается внутрь контейнера <form> помещать другие теги, при
этом сама форма никак не отображается на веб-странице, видны только ее
элементы и результаты вложенных тегов.
<form action="URL">
...
</form>
5. Каскадные таблицы стилей CSS.
Стилем или CSS (Cascading Style Sheets, каскадные таблицы стилей)
называется набор параметров форматирования, который применяется к
элементам документа, чтобы изменить их внешний вид. Возможность работы
со стилями издавна включают в развитые издательские системы и текстовые
редакторы, тем самым позволяя одним нажатием кнопки придать тексту
заданный, заранее установленный вид. Теперь это доступно и создателям
сайта, когда цвет, размеры текста и другие параметры хранятся в
определенном месте и легко «прикручиваются» к любому тегу. Еще одним
преимуществом стилей является то, что они предлагают намного больше
возможностей для форматирования, чем обычный HTML.
CSS представляет собой мощную систему, расширяющую возможности
дизайна и верстки веб-страниц.
6. Наборы правил.
Правила каскадных таблиц состоят из селектора и определения.
Селектор задает элемент (например, таблица), а определение свойства этого
определения (например, цвет фона таблицы). Для наиболее эффективного
использования CSS необходимо иметь в виду следующие правила:
Синтаксис.
Группирование.
Наследование.
Синтаксис
В CSS в качестве селектора выступают теги HTML. Описание задается
в фигурных скобках. Если у заданного свойства несколько значений, то они
отделяются друг от друга пробелами. Описания отделяются друг от друга
точкой с запятой:
Тег {свойство1: значение1 значение2; свойство2: значение;}
Группирование
Можно записывать селекторы через запятую, если им присваивается
одинаковое определение; если селектор имеет несколько определений, то они
записываются через точку с запятой.
H1 {font-family: Arial}
H2 {font-family: Arial}
H1, H2 {font-family: Arial}
H1 {font-weight: bold}
H1 {font-size: 14pt}
H1 {font-weight: bold; font-size: 14pt;}
Наследование
При определении стиля элемента, большинство вложенных элементов
наследуют свойства головного элемента. Например, если в параграфе <P>
задается красный цвет шрифта, то выделенный с помощью <EM> текст также
будет красным.
<P>Внутри параграфа с красным цветом текста, <EM>выделенный
текст</EM> наследует цвет головного тега.</P>
Наследование удобно использовать для описания свойств элементов по
умолчанию. Для этого необходимо описать стиль элемента, порождающего
все остальные элементы HTML документа, т.е. тега <BODY>.
7. Отступы, границы и поля.
Margin
Устанавливает величину отступа от каждого края элемента. Отступом
является пространство от границы текущего элемента до внутренней
границы его родительского элемента.
Если у элемента нет родителя, отступом будет расстояние от края
элемента до края окна браузера с учетом того, что у самого окна по
умолчанию тоже установлены отступы. Чтобы от них избавиться, следует
устанавливать значение margin для селектора <body> равное нулю.
Свойство margin позволяет задать величину отступа сразу для всех
сторон элемента или определить ее только для указанных сторон.
margin: [значение | проценты | auto] {1,4} | inherit
Разрешается использовать одно, два, три или четыре значения, разделяя
их между собой пробелом.
Величину отступов можно указывать в пикселах (px), процентах (%)
или других допустимых для CSS единицах. Значение может быть как
положительным, так и отрицательным числом.
Auto
Указывает, что размер отступов будет автоматически
рассчитан браузером.
Inherit
Наследует значение родителя.
Border
Универсальное свойство border позволяет одновременно установить
толщину, стиль и цвет границы вокруг элемента. Значения могут идти в
любом порядке, разделяясь пробелом, браузер сам определит, какое из них
соответствует нужному свойству. Для установки границы только на
определенных сторонах элемента, воспользуйтесь свойствами border-top,
border-bottom, border-left, border-right.
border: [border-width || border-style || border-color] | inherit
Значение border-width определяет толщину границы. Для управления ее
видом предоставляется несколько значений border-style. border-color
устанавливает цвет границы, значение может быть в любом допустимом для
CSS формате.
inherit наследует значение родителя.
Padding
Устанавливает значение полей вокруг содержимого элемента. Полем
называется расстояние от внутреннего края рамки элемента до
воображаемого прямоугольника, ограничивающего его содержимое.
Свойство padding позволяет задать величину поля сразу для всех
сторон элемента или определить ее только для указанных сторон.
padding: [значение | проценты] {1, 4} | inherit
Разрешается использовать одно, два, три или четыре значения, разделяя
их между собой пробелом. Величину полей можно указывать в пикселах (px),
процентах (%) или других допустимых для CSS единицах. Значение inherit
указывает, что оно наследуется у родителя. При указании поля в процентах,
значение считается от ширины родителя элемента.
8. Селекторы.
В качестве селектора может выступать любой тег HTML, для которого
определяются правила форматирования, такие как: цвет, фон, размер и т. д.
Правила задаются в следующем виде.
Тег { свойство1: значение; свойство2: значение; ... }
Вначале указывается имя тега, оформление которого будет
переопределено, заглавными или строчными символами не имеет значения.
Внутри фигурных скобок пишется стилевое свойство, а после двоеточия —
его значение. Набор свойств разделяется между собой точкой с запятой и
может располагаться как в одну строку, так и в несколько.
9. Классы.
Классы применяют, когда необходимо определить стиль для
индивидуального элемента веб-страницы или задать разные стили для одного
тега. При использовании совместно с тегами синтаксис для классов будет
следующий.
Тег.Имя класса { свойство1: значение; свойство2: значение; ... }
Внутри стиля вначале пишется желаемый тег, а затем, через точку
пользовательское имя класса. Имена классов должны начинаться с
латинского символа и могут содержать в себе символ дефиса (-) и
подчеркивания (_). Использование русских букв в именах классов
недопустимо. Чтобы указать в коде HTML, что тег используется с
определённым классом, к тегу добавляется атрибут class="Имя класса"
Можно, также, использовать классы и без указания тега. Синтаксис в
этом случае будет следующий.
.Имя класса { свойство1: значение; свойство2: значение; ... }
При такой записи класс можно применять к любому тегу.
Классы удобно использовать, когда нужно применить стиль к разным
элементам веб-страницы: ячейкам таблицы, ссылкам, абзацам и др.
10.Каскадные правила.
Каскадные таблицы стилей определяют правила форматирования,
которые применяются к страницам или элементам страниц.
Стилевые правила - Каскадные таблицы стилей задают правила,
которые определяют стиль отображения документа. Например, вы можете
установить стилевое правило, которое определяет, что все заголовки
документа второго уровня <Н2>, будут отображаться светло-зеленым
цветом. Это правило может быть добавлено непосредственно к выбранной
части документа. К примеру, если вы определяете, что выбранный абзац
будет полужирным и с наклоном на странице. Такой стиль называют
встроенным, потому, что информация о стилях добавляется непосредственно
к тому элементу, где этот стиль должен действовать.
Списки стилей - Это списки стилевых правил, которые можно добавить
в любой НТМL-документ в области <НЕАD>. В этом случае, их называют
внедренными списками стилей. Также, списки стилей могут быть созданы в
отдельном файле и связаны с НТМL-документом.
Правила - таблица стилей может содержать одно или несколько правил.
Список стилей является просто набором правил. Любое правило таблиц
стилей состоит из двух частей cелектора и определения.
Селектор - это любой НТМL- элемент.
Определения задают свойства селектора, определяющие как его надо
форматировать. Определение состоит из двух частей - свойства и его
значения, разделенных знаком двоеточие (:).
Селектор {Определение свойства: значение; свойство: значение;...
Определение заключают в фигурные скобки
Определения разделяются при помощи знака точка с запятой (;).
Например,
Н1 {соlоr: blue}
Где, Н1 - это селектор, соlor: blue - Определение.
В области Определения:
{Свойство: Значение}
color - это Свойство, blue - Значение.
Правила размещаются внутри тега STYLE.
11.Наследование.
Наследованием называется перенос правил форматирования для
элементов, находящихся внутри других. Такие элементы являются
дочерними, и они наследуют некоторые стилевые свойства своих родителей,
внутри которых располагаются.
Разберём наследование на примере таблицы. Особенностью таблиц
можно считать строгую иерархическую структуру тегов. Вначале следует
контейнер <table> внутри которого добавляются теги <tr>, а затем идёт тег
<td>. Если в стилях для селектора TABLE задать цвет текста, то он
автоматически устанавливается для содержимого ячеек.
Наследование позволяет задавать значения некоторых свойств
единожды, определяя их для родителей верхнего уровня. Допустим,
требуется установить цвет и шрифт для основного текста. Достаточно
воспользоваться селектором BODY, добавить для него желаемые свойства, и
цвет текста внутри абзацев и других текстовых элементов поменяется
автоматически.
12.Плавающая компоновка.
Свойство position используется для определения расположения
элемента относительно других элементов. Оно может быть абсолютным
(absolute), относительным (relative), статичным (static) и фиксированным
(fixed).
Значение absolute выводит элемент из нормального потока элементов
HTML и отпускает его в вольное плавание. В этом самом плавании элемент с
абсолютным позиционированием, используя свойства top, right, bottom и left,
может быть помещен в любое место страницы.
Указывает, что элемент абсолютно позиционирован, при этом другие
элементы
отображаются
на
веб-странице
словно
абсолютно
позиционированного элемента и нет. Положение элемента задается
свойствами left, top, right и bottom, также на положение влияет значение
свойства position родительского элемента. Так, если у родителя значение
position установлено как static или родителя нет, то отсчет координат ведется
от края окна браузера. Если у родителя значение position задано как fixed,
relative или absolute, то отсчет координат ведется от края родительского
элемента.
13.Работа со шрифтами.
Font
Универсальное свойство, которое позволяет одновременно задать
несколько характеристик шрифта и текста.
font: [font-style||font-variant||font-weight] font-size [/line-height] fontfamily | inherit
В качестве обязательных значений свойства font указывается размер
шрифта и его семейство. Остальные значения являются опциональными и
задаются при желании.
Свойство font-family указывает приоритетный список шрифтов,
используемых для отображения данного элемента или web-страницы.
Свойство font-style определяет normal, italic или oblique.
Свойство font-variant используется для выбора между вариантами
normal и small-caps. Шрифт small-caps использует малые заглавные буквы
(upper case) вместо букв нижнего регистра.
Свойство font-weight описывает, насколько толстым, или "тяжёлым",
должен отображаться шрифт. Шрифт может быть normal или bold.
Размер шрифта устанавливается свойством font-size. Используются
различные единицы измерения (например, пикселы и проценты) для
описания размера шрифта.
Используя сокращенную запись font, можно указывать все свойства
шрифта в одном стилевом правиле.
14.Браузерная несовместимость.
Не все браузеры одинаковы. В действительности, каждый браузер
отличается от остальных. Какие значения стоят по умолчанию для полей,
отступов, размеров шрифта для элемента <p>? Вы будете удивлены
размером списка значений. Для обработки разницы между браузерами
многие начинают со сброса стилей CSS .
На ранних стадиях использования техники сброса, дизайнеры
устанавливали значения только для полей и отступов, используя правило
глобального сброса:1 * { margin: 0; padding: 0; }
Но чем больше людей использовали сброс и обсуждали его, тем
очевиднее становился факт, что установка значений только для полей и
отступов не достаточна (и применение выше приведенного правила для
каждого элемента плохо сказывается на механизме вывода страницы).
Благодаря работе Eric Meyer и других пионеров CSS была создана более
полная коллекция правил сброса.
Важно отметить, какие элементы включены в популярный список
сброса CSS. Также важно знать, что некоторые элементы были намеренно
исключены из данного списка:
input
button
hr
Данные элементы были исключены из-за значительной разницы в их
кросс-браузерном представлении. Легче вообще не задавать для них
никакого стиля.
15.Оформление страниц приложения персональные задания
практического выполнения.
построение страницы регистрации в социальной сети
сложное табличное представление данных
построение ленты новостей с использованием CSS
построение страницы с плавающей компоновкой
для