Ссылки и иллюстрации,
   Списки и таблицы
Ссылки
         Механизмы адресации на ресурсы в Интернет.

                Стр.1                  Стр.2




                 <a href="URL">текст ссылки</a>


    <a href = “1.html”>
    <a href = “http://supersite.ru/1.html”>
    <a href = “http://supersite.ru/1.html#super_mesto”>
Ссылки
         Механизмы адресации на ресурсы в Интернет.
    • Использование абсолютных ссылок
    <a href="http://htmlbook.ru">Изучение HTML</a>



    • Ссылки относительно текущего документа
         <a href="Ссылаемый документ.html">Ссылка</a>
                             или
    <a href=“../../Ссылаемый документ.html">Ссылка</a>



    • Ссылки относительно корня сайта

    <a href="/course/">Курсы</a>
Ссылки
                             Виды ссылок
Непосещенная ссылка. Такое состояние характеризуется для ссылок, которые еще не
открывали. По умолчанию непосещенные текстовые ссылки изображаются синего
цвета и с подчеркиванием.


Активная ссылка. Ссылка помечается как активная в момент ее открытия. Поскольку
время между нажатием на ссылку и началом загрузки нового документа достаточно
мало, подобное состояние ссылки весьма кратковременно. Активной ссылка
становится также, при ее выделении с помощью клавиатуры. Цвет такой ссылки по
умолчанию красный.


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

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
  <html>
       <head>
               <meta http-equiv="content-type" content="text/html; charset=utf-8">
               <title>Ошибки при использовании ссылок</title>
       </head>
       <body>
               <a href="lion.html"><h1>Охота на льва</h1></a>
               <h1><a href="lion.html">Как поймать льва в пустыне</a></h1>
       </body>
  </html>
Ссылки
                               Атрибуты ссылок
    <a target="имя окна">...</a>
    target
    •_blank — загружает страницу в новое окно браузера.
    •_self — загружает страницу в текущее окно (это значение задается по умолчанию).
    •_parent — загружает страницу во фрейм-родитель, если фреймов нет, то это значение работает как
    _self.
    •_top — отменяет все фреймы и загружает страницу в полном окне браузера, если фреймов нет, то
    это значение работает как _self.



    <a title="текст">...</a>


    <a href="mailto:vlad@htmlbook.ru">электронной почте</a>
Ссылки
                                    Якоря

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
         <head>
                 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
                 <title>Быстрый переход внутри документа</title>
         </head>
         <body>
                 <p><a name="top"></a></p>
                 <p>...</p>
                 <p><a href="#top">Наверх</a></p>
         </body>
</html>
Изображения
                  Размещение иллюстрации на веб-странице

Типы файлов иллюстраций:

•GIF (Graphics Interchange Format) — формат графических файлов, широко применяемый при
создании сайтов. GIF использует 8-битовый цвет и эффективно сжимает сплошные цветные
области, при этом сохраняя детали изображения.

•JPEG (Joint Photographic Experts Group) — популярный формат графических файлов, широко
применяемый при создании сайтов и для хранения изображений. JPEG поддерживает 24-
битовый цвет и сохраняет яркость и оттенки цветов в фотографиях неизменными.

•PNG-8 (Portable Network Graphics) — формат по своему действию аналогичен GIF. По заверению
разработчиков использует улучшенный формат сжатия данных, но как показывает практика, это
не всегда так.

•PNG-24 — формат, аналогичный PNG-8, но использующий 24-битную палитру цвета Подобно
формату JPEG, сохраняет яркость и оттенки цветов в фотографиях. Подобно GIF и формату PNG-8,
сохраняет детали изображения, как, например, в линейных рисунках, логотипах, или
иллюстрациях
Изображения
               Добавление изображения на страницу




    Формат
    <img src="URL" alt="альтернативный текст">



    Размеры рисунка
    <img src="URL" width="100" height="100" alt=«Описание">
Таблицы
          Использование таблиц.
Таблицы
                            Создание таблиц



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/
html4/strict.dtd">
<html>
          <head>
          <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
          <title>Тег TABLE</title>
          </head>
          <body>
                   <table border="1" width="100%" cellpadding="5">
                            <tr> <th>Ячейка 1</th> <th>Ячейка 2</th> </tr> <tr>
                            <td>Ячейка 3</td> <td>Ячейка 4</td> </tr>
                   </table>
          </body>
</html>
Таблицы
                   Атрибуты тега <table> и <td>


    <table>                                 <td>
    align                                align
    bgcolor                              bgcolor
    border                               colspan
    cellpadding                          height
    cellspacing                          cellspacing
    cols                                 rowspan
    rules                                valign
    width                                width
Таблицы
                                           Вложенные таблицы


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
            <head>
                          <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
                          <title>Вложенные таблицы</title>
            </head>
            <body>
<table width="100%" border="0" cellpadding="5" cellspacing="0">
<tr>
            <td width="150" valign="top" bgcolor="#f0f0f0">
                         <table width="100%" cellpadding="2" cellspacing="1">
                                     <tr><td bgcolor="#ffffff">Lorem</td></tr>
                                     <tr><td bgcolor="#ffffff">Ipsum</td></tr>
                                     <tr><td bgcolor="#ffffff">Dolor</td></tr>
                                     <tr><td bgcolor="#ffffff">Sit</td></tr>
                                     <tr><td bgcolor="#ffffff">Amet</td></tr>
                         </table>
            </td>
            <td valign="top" bgcolor="#ffffee">Lorem ipsum …</td>
</tr>
</table>
</body>
</html>
Таблицы
                                Особенности таблиц

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


Размеры таблицы
Размеры таблицы изначально не устанавливаются и вычисляются на основе содержимого ячеек.
В итоге суммарная ширина таблицы складывается из следующих параметров:
ширина содержимого ячеек;
толщина всех границ между ячеек;
поля вокруг содержимого, устанавливаемые через атрибут cellpadding;
расстояние между ячейками, которое определяется значением cellspacing.

Порядок ячеек
Основой таблицы выступает строка и ячейка, формирование таблицы происходит слева направо

Верстка_Лекция2

  • 1.
    Ссылки и иллюстрации, Списки и таблицы
  • 2.
    Ссылки Механизмы адресации на ресурсы в Интернет. Стр.1 Стр.2 <a href="URL">текст ссылки</a> <a href = “1.html”> <a href = “http://supersite.ru/1.html”> <a href = “http://supersite.ru/1.html#super_mesto”>
  • 3.
    Ссылки Механизмы адресации на ресурсы в Интернет. • Использование абсолютных ссылок <a href="http://htmlbook.ru">Изучение HTML</a> • Ссылки относительно текущего документа <a href="Ссылаемый документ.html">Ссылка</a> или <a href=“../../Ссылаемый документ.html">Ссылка</a> • Ссылки относительно корня сайта <a href="/course/">Курсы</a>
  • 4.
    Ссылки Виды ссылок Непосещенная ссылка. Такое состояние характеризуется для ссылок, которые еще не открывали. По умолчанию непосещенные текстовые ссылки изображаются синего цвета и с подчеркиванием. Активная ссылка. Ссылка помечается как активная в момент ее открытия. Поскольку время между нажатием на ссылку и началом загрузки нового документа достаточно мало, подобное состояние ссылки весьма кратковременно. Активной ссылка становится также, при ее выделении с помощью клавиатуры. Цвет такой ссылки по умолчанию красный. Посещенная ссылка. Как только пользователь открывает документ, на который указывает ссылка, она помечается как посещенная и меняет свой цвет на фиолетовый, установленный по умолчанию.
  • 5.
    Ссылки Правило вложения ссылок <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>Ошибки при использовании ссылок</title> </head> <body> <a href="lion.html"><h1>Охота на льва</h1></a> <h1><a href="lion.html">Как поймать льва в пустыне</a></h1> </body> </html>
  • 6.
    Ссылки Атрибуты ссылок <a target="имя окна">...</a> target •_blank — загружает страницу в новое окно браузера. •_self — загружает страницу в текущее окно (это значение задается по умолчанию). •_parent — загружает страницу во фрейм-родитель, если фреймов нет, то это значение работает как _self. •_top — отменяет все фреймы и загружает страницу в полном окне браузера, если фреймов нет, то это значение работает как _self. <a title="текст">...</a> <a href="mailto:vlad@htmlbook.ru">электронной почте</a>
  • 7.
    Ссылки Якоря <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Быстрый переход внутри документа</title> </head> <body> <p><a name="top"></a></p> <p>...</p> <p><a href="#top">Наверх</a></p> </body> </html>
  • 8.
    Изображения Размещение иллюстрации на веб-странице Типы файлов иллюстраций: •GIF (Graphics Interchange Format) — формат графических файлов, широко применяемый при создании сайтов. GIF использует 8-битовый цвет и эффективно сжимает сплошные цветные области, при этом сохраняя детали изображения. •JPEG (Joint Photographic Experts Group) — популярный формат графических файлов, широко применяемый при создании сайтов и для хранения изображений. JPEG поддерживает 24- битовый цвет и сохраняет яркость и оттенки цветов в фотографиях неизменными. •PNG-8 (Portable Network Graphics) — формат по своему действию аналогичен GIF. По заверению разработчиков использует улучшенный формат сжатия данных, но как показывает практика, это не всегда так. •PNG-24 — формат, аналогичный PNG-8, но использующий 24-битную палитру цвета Подобно формату JPEG, сохраняет яркость и оттенки цветов в фотографиях. Подобно GIF и формату PNG-8, сохраняет детали изображения, как, например, в линейных рисунках, логотипах, или иллюстрациях
  • 9.
    Изображения Добавление изображения на страницу Формат <img src="URL" alt="альтернативный текст"> Размеры рисунка <img src="URL" width="100" height="100" alt=«Описание">
  • 10.
    Таблицы Использование таблиц.
  • 11.
    Таблицы Создание таблиц <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/ html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Тег TABLE</title> </head> <body> <table border="1" width="100%" cellpadding="5"> <tr> <th>Ячейка 1</th> <th>Ячейка 2</th> </tr> <tr> <td>Ячейка 3</td> <td>Ячейка 4</td> </tr> </table> </body> </html>
  • 12.
    Таблицы Атрибуты тега <table> и <td> <table> <td> align align bgcolor bgcolor border colspan cellpadding height cellspacing cellspacing cols rowspan rules valign width width
  • 13.
    Таблицы Вложенные таблицы <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Вложенные таблицы</title> </head> <body> <table width="100%" border="0" cellpadding="5" cellspacing="0"> <tr> <td width="150" valign="top" bgcolor="#f0f0f0"> <table width="100%" cellpadding="2" cellspacing="1"> <tr><td bgcolor="#ffffff">Lorem</td></tr> <tr><td bgcolor="#ffffff">Ipsum</td></tr> <tr><td bgcolor="#ffffff">Dolor</td></tr> <tr><td bgcolor="#ffffff">Sit</td></tr> <tr><td bgcolor="#ffffff">Amet</td></tr> </table> </td> <td valign="top" bgcolor="#ffffee">Lorem ipsum …</td> </tr> </table> </body> </html>
  • 14.
    Таблицы Особенности таблиц Вложенные таблицы Одну таблицу допускается помещать внутрь ячейки другой таблицы. Это требуется для представления сложных данных или в том случае, когда одна таблица выступает в роли модульной сетки, а вторая, внутри нее, в роли обычной таблицы. Размеры таблицы Размеры таблицы изначально не устанавливаются и вычисляются на основе содержимого ячеек. В итоге суммарная ширина таблицы складывается из следующих параметров: ширина содержимого ячеек; толщина всех границ между ячеек; поля вокруг содержимого, устанавливаемые через атрибут cellpadding; расстояние между ячейками, которое определяется значением cellspacing. Порядок ячеек Основой таблицы выступает строка и ячейка, формирование таблицы происходит слева направо