- •Основные теги html документа Структура html документа.
- •Параметры поля body.
- •Форматирование текста.
- •Пример использования тегов div и syle.
- •Списки.
- •Работа с таблицами. Table – таблицы. Тег используется для представления табличной информации.
- •Создание страницы.
- •Базовый синтаксис css
- •Метод 1: Инлайн/In-line (атрибут style)
- •Метод 2: Внутренний (тэг style)
- •Метод 3: Внешний (ссылка на таблицу стилей)
- •Упражнение.
- •2. Создание "каркаса" страницы.
- •3. Заполнение страницы.
- •4. Блочная разметка страницы.
Основные теги html документа Структура html документа.
HTML-документ – это текстовый файл с расширением *.html или *.htm. В Unix системах файл может быть с расширением *.htmll.
Документ HTML содержит следующие части:
строка содержащая информацию о версии html (подобная строка содержится в xml документах)
раздел заголовка
тело, которое включает содержимое документа.
Пример:
Документ может начинаться со следующей необязательной (но желательной строки):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
Элемент <!DOCTYPE> предназначен для указания типа текущего документа — DTD (document type definition, описание типа документа). Это необходимо, чтобы браузер понимал, как следует интерпретировать текущую веб-страницу, поскольку HTML существует в нескольких версиях, кроме того, имеется XHTML (EXtensible HyperText Markup Language, расширенный язык разметки гипертекста), похожий на HTML, но различающийся с ним по синтаксису. Чтобы браузер «не путался» и понимал, согласно какому стандарту отображать веб-страницу и необходимо в первой строке кода задавать <!DOCTYPE>.
Синтаксис: <!DOCTYPE [Элемент верхнего уровня] [Публичность] "[Регистрация]//[Организация]//[Тип] [Имя]//[Язык]" "[URL]">
Параметры:
Элемент верхнего уровня — указывает элемент верхнего уровня в документе, для HTML это тег <html>.
Публичность — объект является публичным (значение PUBLIC) или системным ресурсом (значение SYSTEM), например, таким как локальный файл. Для HTML/XHTML указывается значение PUBLIC.
Регистрация — сообщает, что разработчик DTD зарегистрирован в международной организации по стандартизации (International Organization for Standardization, ISO). Принимает одно из двух значений: плюс (+) — разработчик зарегистрирован в ISO и - (минус) — разработчик не зарегистрирован. Для W3C значение ставится «-».
Организация — уникальное название организации, разработавшей DTD. Официально HTML/XHTML публикует W3C, это название и пишется в <!DOCTYPE>.
Тип — тип описываемого документа. Для HTML/XHTML значение указывается DTD.
Имя — уникальное имя документа для описания DTD.
Язык — язык, на котором написан текст для описания объекта. Содержит две буквы, пишется в верхнем регистре. Для документа HTML/XHTML указывается английский язык (EN).
URL — адрес документа с DTD.
<HTML>
<!-- Данный эле мент является самым внешним, так как между его начальным и конечным тегам! должна находиться вся Webстраница..-->
<HEAD> <!--Область заголовка Webстраницы. Иными словами, ее первая часть. Так же, как предыдущий элемент, HEAD служит только для формирования общей структуры документа. -->
<TITLE> Заголовок документа </TITLE> <!--Элемент для размещения заголовка Webстраницы. Строка текста, расположенная внутри этого элемента, отображается не в документе, а в заголовке окна браузера. Эта строка часто используется при организации поиска в WWW. Поэтому авторы, создающие Webстраницы для размещения в Сети, должны позаботиться о том, чтобы эта строка, не будучи слишком длинной, достаточно точно отражала назначение документа. Существует три способа для поиска страниц в Интернете на основе текстовых данных: по ключевым словам элемента МЕТА, по тексту, размещенному на странице, и по строке заголовка внутри элемента TITLE.
Важную роль заголовок HTML-документа играет в JavaScript. Существует принципиальная разница между заголовком и телом документа при использовании элемента разметки SCRIPT. Она заключается в определении зоны видимости функций и переменных. Переменные и функции, определенные в заголовке документа, относятся ко всему окну браузера. Это значит, что к ним можно обратиться из любого места документа и изменить их значения. Кроме того, к ним можно обратиться из другого окна или фрейма. Фактически, это глобальные переменные. При работе с многослойными документами переменные и функции тела относятся к слоям, что делает доступ к ним неудобным. -->
< STYLE > H2 {fontfamily: Arbat;} CODE {fontfamily: Arial;} </ STYLE >
<!-- Элемент разметки STYLE предназначен для размещения описателей стилей. При этом описание стиля из данного элемента разметки, если оно совпадает по имени класса и/или идентификатору подкласса со стилем, описанным во внешнем файле, заменяет описание стиля из внешнего файла. С точки зрения влияния на весь документ, описатели стилей задают правила отображения контейнеров HTML-документа для всей страницы.
Естественно, что для каждого элемента существует стилевое оформление по умолчанию, поэтому употребление элемента STYLE не обязательно, но желательно. Если форматов данных нет, значит стили страницы записаны в отдельном файле. Ссылка на такой файл должна находиться в элементе LINK.
В настоящее время контейнер используется только с одним атрибутом TYPE, который задает тип описателя стиля. Это может быть либо text/css , либо text/javascript. Если элемент разметки открыт тегом начала, то он должен быть закрыт тегом конца. В общем виде запись элемента STYLE выглядит так: <STYLE TYPE=тип_описания_стилей> </STYLE>
-->
<LINK REL=stylesheet href="../css/style.css" TYPE="text/css">
<!-- В данном случае речь идет о загрузке стилей из файла style.css. При этом стили задаются в нотации W3C, а не JavaScript, что определяется атрибутом TYPE. В сущности, атрибут REL определяет тип гипертекстовой связи, HREF (Нуреrtехt REFerence) указывает адрес документа, идентифицирующего связь, а атрибут TYPE определяет тип содержания этого документа.В общем случае контейнер LINK имеет следующий вид:
<LINK [REL=тип_отношения] [HREF=URL] [TYPE=тип_содержания]>
Элемент LINK определяет:
тип соединения: "stylesheet".
местонахождение таблицы стилей через атрибут "ref".
тип присоединяемой таблицы стилей: "text/css".-->
<META httpequiv="ContentType" content="text/html; charset=windows1251">
<!-- В Windows с поддержкой таблиц UNICODE появилась возможность указывать тип кодировки документа — CHARSET. К сожалению, на многих Unix-платформах этот механизм не работает, что часто приводит к ошибкам. Для перекодировки на стороне клиента (документ подготовлен в кодировке cp1251) то есть чтобы исключить неопределенность при просмотре конкретной страницы, на ней целесообразно разместить указание на кодовую страницу. В заголовок документа необходимо включить META-тег, приведенный выше.-->
<META name="Author" content="Alexei Goncharov">
<МЕТА name="Keywords" content="WWW, HTML, document, element">
<!-- Этот элемент содержит служебную информацию, которая не отражается при просмотре Webстраницы. Внутри него нет текста в обычном понимании, поэтому нет и конечного тега. Каждый элемент МЕТА содержит два основных атрибута, первый из которых определяет тип данных, а второй — содержание. Атрибут name используется приложением клиентом для получения дополнительной информации о Webстраницах и их упорядочения. Этот атрибут часто заменяют атрибутом httpequiv. Он используется сервером для создания дополнительных полей при выполнении запроса. -->
<BASE HREF=http://www.vsu.ru/cgi-bin/> <!--Элемент разметки BASE служит для определения базового URL для гипертекстовых ссылок документа, заданных в неполной (частичной) форме. Кроме того, BASE позволяет определить мишень (окно) загрузки документа по умолчанию при выборе гипертекстовой ссылки текущего документа. Наиболее часто BASE встречается на страницах узлов, которые имеют "зеркала". Часть документов основного сервера по разным причинам на "зеркальный" сервер не переносится. В этом случае документ с принудительно заданным базовым URL всегда будет ссылаться на основной сервер-->]
<SCRIPT TYPE="text/javascript" SRC=script.code>
<!-- Элемент разметки SCRIPT служит для размещения кода JavaScript, VBScript или JScript. Вообще говоря, SCRIPT можно использовать не только в заголовке документа, но и в его теле. В отличие от контейнера STYLE, ему не требуется дополнительный контейнер LINK для загрузки внешних файлов кодов. <SCRIPT [TYPE=тип_языка_программирования] [SRC=URL]> </SCRIPT> Существует несколько скриптовых языков: JavaScript, VBScript, JScript. По умолчанию подразумевается JavaScript.-->
</HEAD>
<BODY>
Тело документа
<!--Этот элемент заключает в себе гипертекст, который определяет собственно Web страницу. Это та произвольная часть документа, которую разрабатывает авто страницы и которая отображается браузером. Соответственно, конечный тег этс го элемента надо искать в конце HTMLфайла. Внутри элемента BODY можно использовать все элементы, предназначенные для дизайна Webстраницы. Внутри начального тега элемента BODY можно расположить ряд атрибутов, обеспечивающих установки для всей страницы целиком. -->
</BODY>
<HTML>
Элементы <*> – называются тегами. В большинстве случаев теги парные: <*> – открывающий тег, </*> – закрывающий тег. Область действия парного тега распространяется на все содержимое, заключенное между открывающим и закрывающим тегами.
Регистр не влияет на значение тегов.
Документ может содержать комментарии, которые заключаются в теги.
Для задания стиля документа используется CSS Cascading Style Sheets (Таблицы Каскадных Стилей) - это язык, содержащий набор свойств для описания внешнего вида любых HTML документов. С его помощью дизайнер имеет полный контроль над стилем и расположением каждого элемента Webстраницы, что проще и гораздо функциональнее использования обычного набора HTML тегов.
Обычно используемые стили задаются в отдельном файле, ссылка на использование которого указывается в теге < STYLE > .