Лабораторная работа 6 (LAB6 Машеров Д.Е.)

Посмотреть архив целиком

Национальный исследовательский институт

Московский Энергетический Институт (Технический Университет)

Институт автоматики и вычислительной техники

Кафедра Прикладной математики









Лабораторная работа №6

по дисциплине ВМСС

тема: «Разработка Web-страниц, содержащих таблицы и списки»



Выполнил:

Машеров Дмитрий Евгеньевич

Проверил:

к.т.н., доц. Куриленко Иван Евгеньевич













Москва

2012 г.

Оглавление

1. Теги HTML, отвечающие за разметку таблиц 2

1)

2

2)

2

3) d> 2

4) h> 2

5) head> 2

6) head> 2

2. Свойства стилей таблиц для таблиц 2

1) empty-cells 2

2) border-spacing 3

3) border 3

4) padding 3

3. Теги, отвечающие за разметку списков 3

1)

    3

    2)

      3

      3)

    1. 3

      4. Выполнение задания 3

      1) Таблица специального вида(вариант 13) 3

      2) Информационная таблицу с объединением ячеек, выделением ячеек цветом, границей.. 5

      3) Страницы со списками 7





      1. Теги HTML, отвечающие за разметку таблиц

Элемент <table> служит контейнером для элементов, определяющих содержимое таблицы. Любая таблица состоит из строк и ячеек, которые задаются с помощью тегов <tr> и <td>. Внутри <table> допустимо использовать следующие элементы: <caption>, <col>, <colgroup>, <tbody>, <td>, <tfoot>, <th>, <thead> и <tr>.

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

Тег <tr> служит контейнером для создания строки таблицы. Каждая ячейка в пределах такой строки может задаваться с помощью тега <th> или <td>.

  1. d>

Предназначен для создания одной ячейки таблицы. Тег

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

  1. h>

Тег

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

  1. head>

Элемент

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

  1. head>

Элемент

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

  1. Свойства стилей таблиц для таблиц

  1. empty-cells

Задает отображение границ и фона в ячейке, если она пустая. При одновременном добавлении к таблице свойства border-collapse со значением collapse, свойство empty-cells игнорируется.

  1. border-spacing

Задает расстояние между границами ячеек в таблице. border-spacing не работает в случае, когда для таблицы установлено свойство border-collapse со значением collapse.

  1. border

Универсальное свойство border позволяет одновременно установить толщину, стиль и цвет границы вокруг элемента. Значения могут идти в любом порядке, разделяясь пробелом, браузер сам определит, какое из них соответствует нужному свойству. Для установки границы только на определенных сторонах элемента, можно пользоваться свойствами border-top, border-bottom, border-left, border-right.

  1. padding

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


  1. Теги, отвечающие за разметку списков

Тег

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

      Тег <ol> устанавливает нумерованный список. Каждый элемент списка должен начинаться с тега <li>. Если к тегу <ol> применяется таблица стилей, то элементы <li> наследуют эти свойства.

      Тег <li> определяет отдельный элемент списка. Внешний тег <ul> или <ol> устанавливает тип списка — маркированный или нумерованный.

      1. Выполнение задания

      1. Таблица специального вида(вариант 13)

      Страница с таблицой:

      Код таблицы:

      <table id="special">

      <tbody>

      <tr>

      <td style="border-style: dashed solid solid dashed; ">td>

      <td>td>

      <td>td>

      <td style="border-style: dashed dashed solid solid;">td>

      tr>

      <tr>

      <td>td>

      <td rowspan="2" style="border-style: dashed none dashed dashed;">td>

      <td rowspan="2" style="border-style: dashed dashed dashed none;">td>

      <td>td>

      tr>

      <tr>

      <td>td>

      <td>td>

      tr>

      <tr>

      <td style="border-style: solid solid dashed dashed;" >td>

      <td style="border-style: dashed solid solid solid;" >td>

      <td style="border-style: dashed solid solid solid;">td>

      <td style="border-style: solid dashed dashed solid;">td>

      tr>

      tbody>

      table>



      1. Информационная таблицу с объединением ячеек, выделением ячеек цветом, границей..

      Страница с таблицей:

      Код таблицы:

      <table id="info">

      <caption>Название таблицыcaption>

      <tbody>

      <tr>

      <th colspan="4">

      "Заголовок1 4 ячейки"

      th>

      <th colspan="2">

      "Заголовок2 2 ячейки"

      th>

      tr>

      <tr>

      <td>Ячейка 1td>

      <td>Ячейка 2td>

      <td>Ячейка 3td>

      <td>Ячейка 4td>

      <td>Ячейка 5td>

      <td>Ячейка 6td>

      tr>

      <tr>

      <td rowspan="2">Аtd>

      <td>Бtd>

      <td class="important" rowspan="2" colspan="2">Аtd>

      <td>Аtd>

      <td>Бtd>

      tr>

      <tr >

      <td>Бtd>

      <td>Аtd>

      <td class="important">Бtd>

      tr>

      <tr >

      <td>Аtd>

      <td colspan="4">Справа пустая ячейкаtd>

      <td>td>

      tr>

      <tr class="footer">

      <td><div>А1div><div>А2div>td>

      <td>Бtd>

      <td>Аtd>

      <td>Бtd>

      <td>Аtd>

      <td>Бtd>

      tr>

      tbody>

      table>

      CSS для этой таблицы:

      table#info

      {

      border-style: solid;

      border-width: 1px;

      empty-cells: show;

      caption-side: top;

      border-spacing: 1;

      }

      table#info caption

      {

      text-align: right;

      }


      table#info td

      {

      border: 2px solid;

      padding: 4px 4px;

      }

      table#info tr th

      {

      background-color: #C0C0C0;

      }

      table#info tr td.important

      {

      background-color: #FF0000;

      }

      table#info tr.footer

      {

      background-color: #0000FF;

      }

      table#info tr td div

      {

      font-weight: bold;

      font-style: italic;

      color: #FFFF00;

      }



      1. Страницы со списками

      • Разработать страницу, содержащую несколько маркированных списков с различными типами маркеров.

      Код списков:

      <div> <h4>Маркированные списки:h4>div>

      <div>

      С квадратами:

      <ul class="square">

      <li>Элемент1li>

      <li>Элемент2li>

      <li>Элемент3li>

      <li>Элемент4li>

      ul>

      div>

      <div>

      С дисками

      <ul class="disc">

      <li>Элемент1li>

      <li>Элемент2li>

      <li>Элемент3li>

      <li>Элемент4li>

      ul>

      div>

      <div>

      С кругами

      <ul class="circle">

      <li>Элемент1li>

      <li>Элемент2li>

      <li>Элемент3li>

      <li>Элемент4li>

      ul>

      div>



      • Разработать страницу, содержащую несколько нумерованных списков с различными типами нумерации.

      Код списков:

      <div> <h4>Нумерованные списки:h4>div>

      <div>

      С десятичными цифрами:

      <ol class="decimal">

      <li>Элемент1li>

      <li>Элемент2li>

      <li>Элемент3li>

      <li>Элемент4li>

      ol>

      div>

      <div>

      С греческими буквами

      <ol class="greek">

      <li>Элемент1li>

      <li>Элемент2li>

      <li>Элемент3li>

      <li>Элемент4li>

      ol>

      div>

      <div>

      С латинскими буквами

      <ol class="alpha">

      <li>Элемент1li>

      <li>Элемент2li>

      <li>Элемент3li>

      <li>Элемент4li>

      ol>

      div>

      <div>

      • Разработать страницу, содержащую маркированный список нумерованных списков.

      Код списков

      <div> <h4>Список списков:h4>div>

      <div>

      <ul class="circle">

      <li>

      <ol class="greek">

      <li>Элемент1li>

      <li>Элемент2li>

      <li>Элемент3li>

      <li>Элемент4li>

      ol>

      li>

      <li>

      <ol class="decimal">

      <li>Элемент1li>

      <li>Элемент2li>

      <li>Элемент3li>

      <li>Элемент4li>

      ol>

      li>

      <li>

      <ol class="alpha">

      <li>Элемент1li>

      <li>Элемент2li>

      <li>Элемент3li>

      <li>Элемент4li>

      ol>

      li>

      ul>

      div>




      Случайные файлы

Файл
gost_19433-88.doc
4683.rtf
~$РПЗ-0.doc
Indefenity.doc
152801.rtf




Чтобы не видеть здесь видео-рекламу достаточно стать зарегистрированным пользователем.
Чтобы не видеть никакую рекламу на сайте, нужно стать VIP-пользователем.
Это можно сделать совершенно бесплатно. Читайте подробности тут.