Лекция 3: Структура html-документа. Ввод и Оформление текста

Вид материалаЛекция

Содержание


В одном абзаце нужно выровнять текст по левому краю, а в другом – по правому. Чтобы задать выравнивание абзаца, используют А.
Содержимое сайта
ТЕГИ внутри
CONTENT – используется вместе с А. HTTP-EQUIV и NAME. Задает значение свойства, которое указывается с их помощью. HTTP-EQUIV
Подобный материал:
Лекция 3: Структура HTML-документа. Ввод и Оформление текста.
  1. Условные обозначения.
    1. Тег
    2. Атрибут тега
  2. Структура HTML-документа:



    4. <br /> <li><META><br /> <li><STYLE><br /> <li><link><br /> <li><SCRIPT><br /> <li><BASE><br /> <li><BODY><br /> </ol> <li>Оформление текста.<br /> <ol> <li><h2><br /> <li><br /><br /> <li><br /><br /> <li>СПИСКИ: маркированный <ul>, Нумерованный <ol>, список определений <DL>, вложенные списки.<br /> <li>ССЫЛКИ<br /> </ol> </ol> <br />Условные обозначения: <br /> <br /><i>Тег</i> – это элемент языка HTML, который несет в себе определенную информацию, может писывать документ в общем или способ форматирования текста.<br /> <br />Т. помещается в угловые скобки.<br /> <br /><i>Контейнер – </i>информация, заключенная между открывающимся и закрывающимся тегом. Открывающий Т. включает форматирование, закрывающий – выключает его.<br /> <br />T. нужен для того, чтобы сообщить браузеру, какой элемент должен быть на месте тега или какого типа информация заключена внутри Т. Кроме того, теги показывают, как следует отображать эту информацию.<br /> <br /><i>Атрибут – </i>элемент тега, который сообщает браузеру, каким образом должен отображаться тот или иной элемент страницы. А. позволяют сделать более разнообразным внешний вид информации. В некоторых случаях использование тега без атрибутов не дает результатов. <br /> <br />Пример. <i> В одном абзаце нужно выровнять текст по левому краю, а в другом – по правому. Чтобы задать выравнивание абзаца, используют А.</i> ALIGN тега <P>.<br /> <br /><P align=”left”>Выравнивание по левому краю</P><br /> <br /><P align=”right”>выравнивание по правому краю</P><br /> <br /><b>Значение</b> А. задается после знака = в “”. Значения А. как правило, различаются в зависимости от тега.<br /> <br />Структура HTML документа <br /> <br /><b><b>DOCTYPE></b> тег записывается в начале HTML-файла. Он описывает документ и предоставляет основную информацию для браузера.<br /> <br /><b>ЛИСТИНГ 1.1</b><br /> <br />YPE html PUBLIC “-//w3c//DTD XHTML 1.0 Transitional//EN” “g/TR/xhtml1/DTD/xhtml-transitional.dtd”><br /> <br />html-показывает, что для создания документа используется язык HTML<br /> <br />public-указывает на то, что при создании документа использовалась общепринятая версия HTML.<br /> <br />“g/TR/xhtml1/DTD/xhtml1-transitional.dtd” – адрес URL-документа, в котором описываются элементы и атрибуты, используемые в соответствии с версией языка. В этом теге содержится общая служенная информация о странице. <br /> <br /><b><HTML></b> - главный структурный т. страницы. Все содержимое страницы записывается внутри его контейнера <HTML> <b> СОДЕРЖИМОЕ САЙТА</b> </HTML>.<br /> <br />xmlns – задает пространство имен для xml-документа, поскольку наш документ является разновидностью xml-документа.<br /> <br />Lang – задает язык документа.<br /> <br />Xml:lang – тоже задает язык документа.<br /> <br />Title – задает всплывающую подсказку для страницы.<br /> <br /><b>ЛИСТИНГ 1.2.</b><br /> <br />YPE html PUBLIC “-//w3c//DTD XHTML 1.0 Transitional//EN” “g/TR/xhtml1/DTD/xhtml-transitional.dtd”><br /> <br /><html xmlns=”g/1999/xhtml” title=”Моя страничка” lang=”ru” xml:lang=”ru”><br /> <br /> Содержимое документа --><br /> <br /></html><br /> <br /><b><HEAD></b> используется для служебных целей, введенная в нем информация не отображается в окне браузера, однако он содержит множество данных, которые указывают браузеру, как следует обрабатывать страницы. Теги, находящиеся внутри контейнера <head>, помогают браузеру в обработке страницы, а поисковым системам – в индексации документа. Т. не имеет атрибутов, т.к. он только лишь выполняет структурирующие функции.<br /> <br /><b> ТЕГИ внутри <HEAD></b><br /> <br /><title> - задает заголовок окна<br /> <br /><meta> - задает служебную информацию<br /> <br /><script> - позволяет добавлять сценарии<br /> <br /><link> - задает ссылку на таблицы стилей<br /> <br /><style> - позволяет добавить стили для страницы<br /> <br /><base> - задает базовый адрес документа<br /> <br /><basefont> - задает для страницы шрифт по умолчанию<br /> <br /><bgsound> - фоновый звук на странице<br /> <br /><b><TITLE> -</b> задает название страницы, которое будет отображаться в строке с названием приложения окна браузера. Этот тег требует закрывающий тег . При сохранении страницы в разделе «Избранное» в качестве называния ссылки будет использоваться текст, записанный в теге . Некоторые поисковые системы используют текст, содержащийся в этом теге, для поиска и выводят его в качестве заголовка результата поиска. <br /> <br /><b>ЛИСТИНГ 1.3</b><br /> <br />YPE html PUBLIC “-//w3c//DTD XHTML 1.0 Transitional//EN” “g/TR/xhtml1/DTD/xhtml-transitional.dtd”><br /> <br /><html><br /> <br /><title>Пример создания заголовка страницы



      —Содержимое документа-->



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

      АТРИБУТЫ :
      1. CONTENT – используется вместе с А. HTTP-EQUIV и NAME. Задает значение свойства, которое указывается с их помощью.
      2. HTTP-EQUIV – устанавливает служебные св-ва документа, например его кодировку, дает браузеру информацию о том, как нужно обрабатывать документ. К его значениям относятся: Content-Type- определяет тип содержимого документа. Желательно указывать всегда; Expires – задает время действия документа. После даты, указанной для этого св-ва, документ считается устаревшим; Pragma – определяет тип кэширования вашего документа, т.е. можно запретить браузеру сохранять страницу в кэш. Refresh – позволяет задать параметры автоматической загрузки документа в то же окно браузера, что и текущий документ; Content-Language – задает язык содержимого, является аналогом атрибута lang тега html; Content-Script-Type Типы сценариев, используемых на сайте; Content-Style-Type задает типы таблиц стилей.
      3. NAME – содержит служебную информацию о документе, хранит данные об авторе и содержимом документа. Эти данные не влияют на обработку документа браузером, однако предоставляют информацию для поисковых систем. . К его значениям относятся: Keyword – задает ключевые слова, используемые на страницу. По этим словам осуществляют поиск поисковые системы; Description – описание содержимого документа; Author – задает автора документа; Document-State – задает необходимость переиндексации страницы; Resource-Type – задает тип ресурса [Возможные типы рассмотрим ниже, однако надо учитывать, что если тип документа отличается от «Document», то поисковые системы не будут его индексировать]; Revisit – период переиндексации документа (в днях); Robots – указания для роботов и поисковых машин; Subject – задает тематику документа для поисковых машин.
      4. ROBOTS – дает команды поисковым машинам: Index – эта страница должна индексироваться; Noindex – эта страница не должна индексироваться; Follow – индексировать страницы по ссылкам с этой страницы; Nofollow – не индексировать страницы по ссылкам с этой страницы; All – эта страница должна индексироваться, индексировать страницы по ссылкам с этой страницы; None – эта страница не должна индексироваться, не индексировать страницы по ссылкам с этой страницы.

      Встретив строку URL, робот прекратит индексацию текущей страницы и перейдет на страницу с адресом www.test.ru

      ЛИСТИНГ 1.4

      YPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “g/TR/xhtml1/DTD/xhtml-transitional.dtd”>





      English Learning Website



      < meta http-equiv=”refresh” content=”10; URL=ru” />







      для индексации сайта в поисковых системах” />















      —Содержимое документа-->



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

      Атрибуты :
      1. alink – задает цвет активной ссылки
      2. vlink – задает цвет посещенной ссылки
      3. link – задает цвет непосещенной ссылки
      4. bgcolor – задает цвет фона.
      5. Bgproperties – определяет, будет ли фон прокручиваться вместе с текстом или нет: может принимать только одно значение FIXED.
      6. Bottommargin – расстояние от нижнего края окна браузера до содержимого страницы
      7. Leftmargin – расстояние от левого края окна браузера до содержимого страницы
      8. Topmargin – расстояние от верхнего края окна браузера до содержимого страницы. Расстояние для все таких А. устанавливается в пикселах.

      Цвета ссылок можно задать в hex-формате или с помощью ключевых слов.


      ЛИСТИНГ 1.5

      YPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “g/TR/xhtml1/DTD/xhtml-transitional.dtd”>







      Использование тега BODY









      - заголовок: h1 – самый значимый, крупный размер шрифта; h6 – самый мелкий по умолчанию.

      Атрибуты :
      1. Align – выравнивание заголовка: left – по левому краю; right – по правому краю; center – по центру; justify – по ширине (для заголовков длиннее строки).
      2. Title – «текст всплывающей подсказки».

      <P> вводит на страницу абзац.

      Атрибуты
      :
      1. Align - left – по левому краю; right – по правому краю; center – по центру; justify – по ширине (для заголовков длиннее строки).
      2. Title – «текст всплывающей подсказки».

      ЛИСТИНГ 1.6





      Абзацы





      Это абзац по центру








      -       служит для переноса текста на новую строку.

      ЛИСТИНГ 1.9





      Обрывки строк





      Я памятник себе воздвиг нерукотворный,


      К нему не зарастет народная тропа,


      Вознесся выше он главою непокорной


      Александрийского столпа.






      Списки