ОИТ

Тег <meta> обеспечивает метаданные о HTML документе. Метаданные не отображаются на странице, но интерпретируются браузерами и поисковыми системами.

Элементы meta обычно используются, чтобы указать описание страницы, ключевые слова, автора документа, дату последней модификации страницы, и другие метаданные.

Тег <meta> всегда идет внутри элемента head.

Метаданные могут быть использованы браузерами (как отображать содержание или перезагружать страницу), поисковыми системами (ключевые слова), и другими веб службами.

7. Основные элементы разметки документа HTML.

Гиперссылки

●Атрибут href задаёт значение адреса документа, на который указывает ссылка.

●filename — имя файла или адрес Internet, на который необходимо сослаться.

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

●target — задаёт значение окна или фрейма, в котором будет открыт документ, на который указывает ссылка. Возможные значения атрибута:

o _top — открытие документа в текущем окне; o _blank — открытие документа в новом окне;

o _self — открытие документа в текущем фрейме;

o _parent — открытие документа в родительском фрейме.

Якорь

Тот же элемент используется для создания так называемых «якорей» (anchor), которые могут потом использоваться в гиперссылках, направленных на какой-то определенный элемент страницы.

Аналогичным образом якорь можно сделать на закладку, находящуюся на другой веб-странице или на другом сайте: там, куда направлена ссылка, должен стоять <a name="xxx"></a>, а там, откуда идёт ссылка, к значению href добавляется знак решётки и название якоря.

Также якорем в современных браузерах может служить id любого элемента.

Текстовые блоки

●<H1> … </H1>, <H2> … </H2>, … ,<H6> … </H6> — заголовки 1, 2, … 6 уровня.

Используются для выделения частей текста (заголовок 1 — самый крупный, 6

— самый мелкий).

●<P> — новый абзац. Можно в конце абзаца поставить </P>, но это не обязательно.

●<BR> — новая строка. Этот тег не закрывается (то есть не существует тега

</BR>)

●<HR> — горизонтальная линия

●<BLOCKQUOTE> … </BLOCKQUOTE> — цитата. Обычно текст сдвигается вправо.

●<PRE> … </PRE> — режим preview (preformatted text). Пробельные символы остаются там, где они есть в оригинальном документе (в других тегах игнорируются). Внутри могут обрабатываться внутристроковые теги кроме img, object, big, small, sup и sub.

●<DIV> … </DIV> — блок (обычно используется для применения стилей CSS)

●<SPAN> … </SPAN> — строка (обычно используется для применения стилей

CSS)

Форматирование текста

●<EM> … </EM> — логическое ударение (обычно отображается курсивным шрифтом)

●<STRONG> … </STRONG> — усиленное логическое ударение (обычно отображается жирным шрифтом)

●<I> … </I> — выделение текста курсивом

●<B> … </B> — выделение текста жирным шрифтом

●<U> … </U> — подчёркивание текста

●<S> … </S> (или <STRIKE> … </STRIKE> )— зачёркивание текста

●<BIG> … </BIG> — увеличение шрифта

●<SMALL> … </SMALL> — уменьшение шрифта

●<BLINK> … </BLINK> — мигающий текст. Внимание! Этот тег не работает в браузере Internet Explorer версий 5 и ниже без применения JavaScript

●<MARQUEE> … </MARQUEE> — сдвигающийся по экрану текст.

●<SUB> … </SUB> — подстрочный текст. Например, H<SUB>2</SUB>O создаст текст H2O.

●<SUP> … </SUP> — надстрочный текст. Например, E=mc<SUP>2</SUP>

создаст текст E=mc2.

●<FONT параметры> … </FONT> — задание параметров шрифта. У этого тега есть следующие параметры:

o COLOR=цвет — задание цвета. Цвет может быть задан в шестнадцатеричной форме как #rrggbb (первые 2 шестнадцатеричные цифры задают красную компоненту, следующие 2 — зелёную, последние 2 — синюю) или названием.

o FACE=шрифт задание гарнитуры шрифта

o SIZE=размер задание размера шрифта. Размер от 1 до 7: стандартный по умолчанию 3. Есть много способов изменить стандартный размер.

o SIZE=+изменение или SIZE=-изменение — изменение размера шрифта от стандартного. Например, +2 означает размер на 2 больше стандартного.

8.Гипертекст. Гипертекстовый документ.

Гипертекст — это документ, который составлен с помощью специального языка разметки (HTML или любого другого). Гипертекстовый документ имеет внутри особые отметки, теги. Именно теги обозначают, где находится гиперссылка. В дальнейшем браузер осознает команду, что нужно перейти на другую ссылку с помощью данных тегов. Гипертекстовый документ еще принято называть HTML документом. Он включает в себя две части: сам текст (информационный блок, материал, данные,

содержимое) и теги — для разметки текста. Они определяют внешний вид, как разместить ссылки и т. д.

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

Возможности гипертекста:

●Удобство. Вы логично структурируете контент, связываете страницы с релевантными материалами.

●Юзабилити. Красивые элементы интерфейса, полезные функции для пользователя

●Включение элементов медиа - встраивание в страницу видеороликов, звуковых дорожек.

●Новый способ запроса данных пользователем: чтобы получить информацию, пользователю достаточно нажать на выделенный элемент.

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

9. Гиперссылки. Виды гиперссылок.

Гиперссылка — это интерактивный элемент, осуществляющий связь двух документов. Гиперссылка может быть в виде картинки или текста. Один клик по гиперссылке позволяет сделать внутренний переход на нужную страницу в том же документе (на том же сайте), либо – внешний переход на другой сайт, на другой объект в Интернете.

Три классификации гиперссылок:

1.внешние и внутренние гиперссылки,

2.текстовые и графические,

3.рабочие и битые.

Первая классификация связана с делением ссылок по зоне их действия:

1.внешние

2.внутренние

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

Вторая классификация гиперссылок — по формату. Здесь есть два вида гиперссылок:

1.текстовые

2.графические

Впервом случае речь идет об обычном тексте, в который вставлена ссылка (иначе говоря, URL-редирект или направление пользователя на конкретный URL-адрес).

Во втором случае ссылка вставляется в какой-либо графический файл, к примеру, в картинку, анимацию, баннер, кнопку и т.д. Другими словами, графическая ссылка — это когда кликаешь по картинке и переходишь в указанном направлении. Графические ссылки используют для изготовления кнопочного меню, для размещения рекламы, тизеров, миниатюр статей и т.д.

Третья классификация гиперссылок – по их состоянию. Можно выделить два вида гиперссылок:

1.рабочие

2.нерабочие («битые»)

Впервом случае документ, на который указывает ссылка, без проблем открывается и загружается. Во втором случае загрузка документа происходит с ошибками или не происходит вообще. Причин появления нерабочих («битых») ссылок может быть довольно много. Как правило, они связаны с изменением структуры сайта, удалением каких-то страниц или даже целых разделов, сменой стандартных URL на ЧПУ.

10. Изображения в языке HTML. Применение изображений на веб странице.

Для встраивания изображений в HTML-документ применяется тег <img>.

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

Атрибуты тега <img>:

•src - имя графического файла (обязательный)

•alt - текст вместо рисунка (необязательный)

•align – выравнивание относительно окружающего текста ["top" | "middle"| "bottom"] ["left" | "right”]

•border - рамка вокруг рисунка

•hspace - расстояние по горизонтали между рисунком и текстом

•vspace - ...по вертикали...

•width и height - размеры изображения

Тег <img> допустимо размещать только внутри блочных элементов типа <p>, <div> или

<table>.

Для создания ссылки-изображения достаточно поместить картинку внутрь тега <а>.

11. Виды списков в языке HTML. Синтаксис задания списков.

Современными спецификациями HTML предусмотрено три основных вида списков:

•маркированные списки (unordered list);

•нумерованные списки (ordered list);

•списки определений (definition list).

Маркированные списки задаются при помощи тегов <ul>...</ul>. Для задания элементов списка используются теги <li>...</li> (item list). Тип маркера может задаваться с помощью атрибута type. В HTML имеется три значения атрибута type: закрашенный круг disk, пустой круг circle и квадрат square. По умолчанию используется тип disc.

В нумерованных списках (ordered list) каждому пункту присваивается номер. Создаются такие списки при помощи тегов <ol>...</ol>. Для элементов списков, как и в случае маркированных списков, используются теги <li>...</li>. В таких списках доступны пять типов маркеров (арабские цифры, строчные римские цифры, прописные римские цифры, строчные 4 латинские буквы, прописные латинские буквы), которые, так же как и в маркированных списках, определяются при помощи атрибута type.

Списки определений применяются для того, чтобы организовать текст по примеру словарных статей. Они задаются с помощью тегов <dl>...</dl> (definition list). Определяемый термин, или понятие, помещается в теги <dt>...</dt> (definition term). Определение понятия заключается в теги <dd>...</dd> (definition description).

Маркированные и нумерованные списки можно вкладывать друг в друга. Допускается произвольное вложение различных типов списков.

12. Таблицы в языке HTML. Синтаксис задания таблиц.

Таблицы являются одной из основных структур, используемых для структурирования информации в HTML-документах.

Варианты использования таблиц:

•для представления данных, разбитых по строкам и столбцам;

•как средство форматирования web-страниц.

HTML-таблицы упорядочивают и выводят на экран данные с помощью строк или столбцов

<table>...</table> - создание таблицы

<tr>...</tr> - (table row ‒ строка таблицы) <td>...</td> - (table data — данные таблицы)

Таблицы состоят из ячеек, образующихся при пересечении строк и столбцов. Ячейки таблиц могут содержать любые HTML-элементы, такие как: заголовки, списки, текст, изображения, элементы форм, а также другие таблицы. Ячейки заголовка столбца таблицы задаются элементом <th>...</th>

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

13. Табличная верстка веб-страницы. Атрибуты форматирования ячеек таблицы.

Основные атрибуты тега <table>:

border="1" - толщина рамки bordercolor="#FF0000" – цвет рамки cellspacing="10" – отступ между ячейками cellpadding="10" - отступ внутри ячеек height="50px" – высота таблицы

width ="80%"– ширина таблицы

Для объединения нескольких ячеек в таблице используются атрибуты colspan (объединение столбцов) и rowspan (объединение строк) тега <td>

14. Блочная верстка веб-страницы. Основные элементы веб-страницы.

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

Блочная верстка сайта div верстка:

Рамка (border) – это контур, для которого можно задать такие характеристики как толщина, цвет и тип (пунктирная, сплошная, точечная).

Поля (padding) – отделяют содержимое блока от его рамки, чтобы текст, например, не был «впритык» к стенкам блока.

Отступы (margin) – это пустое пространство между различными блоками, позволяющее на заданном расстоянии расположить два блока относительно друг друга.

Блочная верстка сайта включает в себя блоки. Блоки, как и таблицы – это элементы, всегда располагающиеся на странице вертикально. То есть, если в коде страницы записаны подряд два блока, то отобразятся они в браузере один под другим. Если нам нужно расположить несколько блоков горизонтально, то в их свойствах задается такой параметр как «обтекание» (float).

15. Каскадные таблицы стилей CSS. Назначение и область применения.

Таблицы каскадных стилей CSS (Cascade Style Sheets) – это простая технология определения и присоединения стилей оформления к документам HTML. Стиль оформления – это все то, что определяет внешний вид документа: размер, цвет и вид шрифта текста, цвет фона текста, наличие границ, подчеркивания, выравнивание текста и т. д. Стиль определяется набором правил отображения тегов, задаваемых таблицей стилей.

Таблица стилей – это шаблон, который управляет форматированием тегов в HTML -документе. Таблица стилей состоит из набора правил описания стиля.

Правило каскадных таблиц стилей состоит из двух частей: селектора и определения.

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

Таблицы стилей также позволяют определить цвет и начертание текстового фрагмента, изменять эти параметры внутри текстового блока, выполнять выравнивание текстового блока относительно других блоков и компонентов страницы. Наличие подобных возможностей позволяет говорить о CSS как о средстве разделения логической структуры документа и формы его представления. Логическая структура документа определяется элементами HTML-разметки, в то время как форма представления каждого из этих элементов задается CSS-описателем элемента.

CSS позволяет полностью переопределить форму представления элемента разметки по умолчанию. Например, <I>...</I> определяет отображение текста курсивом.

16. Селекторы CSS. Виды селекторов CSS.

Селекторы - это выражения, которые указывают браузеру, к какому элементу HTML нужно применить те или иные свойства CSS, определенные внутри блока объявления. Селекторы представляют структуру веб-страницы.

Виды селекторов:

Универсальный селектор *

Селектор * позволяет выбрать все элементы внутри документа (универсальный селектор). CSS синтаксис: * { блок объявлений; } Пример

Селекторы типа (элемента)

Селекторы типа определяют HTML элемент, к которому будет применен стиль

Селектор класса

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

Групповые селекторы

В CSS допускается задать единый стиль не только одному селектору, но и группе селекторов. В группу могут входить как селекторы типа, селекторы класса, так и id селекторы. Селекторы можно сгруппировать в список, разделив запятыми.

Селекторы потомков

Селектор потомков (теги, располагаемые внутри другого тега) состоит из двух и более селекторов, разделенных пробелом.

Количество тегов, которые можно записать потомками, неограниченно.

Псевдоклассы ссылок

Псевдокласс в CSS — это ключевое слово, добавленное к селектору, которое определяет его особое состояние. Псевдоклассы ссылок применяются к тегам с атрибутом href.

17. Каскадные таблицы стилей. Правило задания стилей.

Каскадные таблицы стилей (CSS) — это набор правил форматирования, определяющих отображение содержимого на веб-странице. При форматировании страницы с помощью стилей CSS собственно содержимое страницы разделяется с представлением содержимого. Содержимое страницы (HTML-код) располагается в HTML-файле, а правила CSS, определяющие представление кода, располагаются в другом файле (внешней таблице стилей) или в другой части HTML-документа (обычно в заголовке).

Весь CSS-код состоит из повторяющихся блоков следующего вида:

селектор {

свойство1: значение; свойство2: значение;

}

Такой блок называется «CSS-правило». Каждое CSS-правило содержит хотя бы один селектор и свойство.

Итак, каскадная таблица стилей — это набор правил форматирования тегов HTML. Приведем несколько примеров написания таких правил:

1.Основной текст с выравниванием по ширине, абзацный отступ 30px, гарнитура (шрифт) — Serif, кегль (размер шрифта) — 14px:

p {

text-align: justify; text-indent: 30px; font-family: Serif; font-size: 14px;

}

Это правило будет применено ко всем тегам <p>.

2. Синий цвет для заголовков с первого по третий уровень:

h1, h2, h3 {

color: blue; /* тоже самое, что и #0000FF */

}

3. Таблицы и изображения выводить без обрамления:

table, img {border: none;}

4. Ссылки в элементах списков показывать без подчеркивания:

li a {text-decoration: none;}

5.Внутренние отступы слева и справа для блоков (<div>), заголовков таблиц и ячеек таблиц установить в 10px и залить фон желтым цветом:

div, th, td { padding-left: 10px; padding-right: 10px;

background-color: yellow;

}

6.Все ссылки в документе отображать черным цветом и полужирным шрифтом, а в основном тексте и списках — обычным, а также выделять их зеленым цветом и подчеркивать только при наведении курсора (в описании правил использован псевдоэлемент a:hover).

a {color: black; font-weight: bold;}

p a, li a {font-weight: normal; text-decoration: none;} p a:hover, li a:hover {

color: #00FF00; text-decoration: underline;

}

18. Псевдо-классы ссылок. Виды псевдо-классов ссылок.

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

Синтаксис применения псевдоклассов следующий. Селектор:

Псевдокласс { Описание правил стиля }

Вначале указывается селектор, к которому добавляется псевдокласс, затем следует двоеточие, после которого идёт имя псевдокласса. Если псевдокласс указывается без селектора впереди (:hover), то он будет применяться ко всем элементам документа.