LAB6 Бочаров И.А. (Лабораторная работа 6)

2015-08-20СтудИзба

Описание файла

Файл "LAB6 Бочаров И.А." внутри архива находится в папке "Лабораторная работа 6". Документ из архива "Лабораторная работа 6", который расположен в категории "". Всё это находится в предмете "вычислительные машины, системы и сети (вмсис)" из 8 семестр, которые можно найти в файловом архиве НИУ «МЭИ» . Не смотря на прямую связь этого архива с НИУ «МЭИ» , его также можно найти и в других разделах. Архив можно найти в разделе "лабораторные работы", в предмете "вычислительные машины, системы и сети (вмсс)" в общих файлах.

Онлайн просмотр документа "LAB6 Бочаров И.А."

Текст из документа "LAB6 Бочаров И.А."

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

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

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

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





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

по дисциплине:

ВМСС

тема работы:

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



Выполнил:

Бочаров Иван Андреевич

Проверил:

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











Москва

2012 г.

Цель работы

Научиться оформлять таблицы на WEB-страницах. Получить навыки оформления маркированных и нумерованных списков на WEB-страницах.

Подготовка к работе

  • Ознакомиться с тегами HTML, отвечающими за разметку таблиц

  • Ознакомиться со стилями таблиц в HTML

  • Ознакомиться с способом разметки маркированных списков

  • Ознакомиться с способом разметки нумерованных списков

Выполнение подготовки

Теги HTML, отвечающие за разметку страницы

  • Тег

Элемент 

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

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

  • Тег

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

Допускается применять несколько тегов  внутри контейнера 

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

  • Тег

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

В пределах таблицы разрешается использовать только один элемент .

  • Тег d>

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

.

  • Тег  

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

.

  • Тег

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

  • Тег  

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

.

Стили таблиц в HTML

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

Цвет фона ячеек

Цвет фона одновременно всех ячеек таблицы устанавливается через свойство background, которое применяется к селектору TABLE. При этом следует помнить о правилах использования стилей, в частности, наследовании свойств элементов. Если одновременно с TABLE задать цвет у селектора TD или TH, то он и будет установлен в качестве фона.

Поля внутри ячеек

Полем называется расстояние между краем содержимого ячейки и ее границей. Обычно для этой цели применяется атрибут cellpadding тега 

. Он определяет значение поля в пикселах со всех сторон ячейки. Допускается использовать стилевое свойство padding, добавляя его к селектору TD

Границы и рамки

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

Использование атрибута cellspacing

Известно, что атрибут cellspacing тега 

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

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

Применение свойства border

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

Применяя свойство border к селектору TABLE, мы добавляем рамку вокруг таблицы в целом, а к селектору TD или TH — рамку вокруг ячеек 

Выравнивание содержимого ячеек

По умолчанию текст в ячейке таблицы выравнивается по левому краю. Исключением из этого правила служит тег , он определяет заголовок, в котором выравнивание происходит по центру. Чтобы изменить способ выравнивания применяется стилевое свойство text-align 

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

Способы разметки списков

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

Маркированный список

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

    , а каждый пункт списка начинается с тега 
  • , как показано ниже.

    • Первый пункт

    • Второй пункт

    • Третий пункт

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

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

        . Допустимые значения – disc, circle, square.

        Нумерованный список

        Нумерованные списки представляют собой набор элементов с их порядковыми номерами. Вид и тип нумерации зависит от атрибутов тега 

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

          <ol>

          <li>Первый пунктli>

          <li>Второй пунктli>

          <li>Третий пунктli>

          ol>

          Если не указывать никаких дополнительных атрибутов и просто написать тег 

            , то по умолчанию применяется список с арабскими числами (1, 2, 3,...)

            В качестве нумерующих элементов могут выступать следующие значения:

            • арабские числа (1, 2, 3, ...) – type = “1”;

            • прописные латинские буквы (A, B, C, ...) – type = “A”;

            • строчные латинские буквы (a, b, c, ...) – type = “a”;

            • прописные римские числа (I, II, III, ...) – type = “I”;

            • строчные римские числа (i, ii, iii, ...) – type = “i”.

            Чтобы начать список с определенного значения, используется атрибут start тега 

              .

              Список определений

              Список определений состоит из двух элементов — термина и его определения. Сам список задается с помощью контейнера , термин — тегом , а его определение — с помощью тега 

               Общая структура списка определений

              <dl>

              <dt>Термин 1dt>

              <dd>Определение 1dd>

              <dt>Термин 2dt>

              <dd>Определение 2dd>

              dl>

              Выполнение работы

              В данной лабораторной работе было необходимо разработать 2 таблицы: одну с указанным в варианте форматированием, а вторую – произвольного формата, но с использованием объединения ячеек, разным цветом фона ячеек. Приведем скриншот:

              Следует заметить, что, хоть в задании и имелось указание некоторые из границ сделать линией «точка-тире», стандартные возможности HTML и CSS не позволяют оформить одну из границ требуемым образом. Подобный вид линии пока описан только в черновиках спецификации CSS3.

              Вторым заданием было создать страницу, на которой разместить различные виды списков (маркированный и нумерованный) с различными типами маркеров и нумерации. Приведем скриншоты:

              Код страниц приведен ниже:

              tables.html

              Лабораторные работы по ВМСС

              Главная страница

              Таблица 1

              Зачем заказывать выполнение своего задания, если оно уже было выполнено много много раз? Его можно просто купить или даже скачать бесплатно на СтудИзбе. Найдите нужный учебный материал у нас!
              Ответы на популярные вопросы
              Да! Наши авторы собирают и выкладывают те работы, которые сдаются в Вашем учебном заведении ежегодно и уже проверены преподавателями.
              Да! У нас любой человек может выложить любую учебную работу и зарабатывать на её продажах! Но каждый учебный материал публикуется только после тщательной проверки администрацией.
              Вернём деньги! А если быть более точными, то автору даётся немного времени на исправление, а если не исправит или выйдет время, то вернём деньги в полном объёме!
              Да! На равне с готовыми студенческими работами у нас продаются услуги. Цены на услуги видны сразу, то есть Вам нужно только указать параметры и сразу можно оплачивать.
              Отзывы студентов
              Ставлю 10/10
              Все нравится, очень удобный сайт, помогает в учебе. Кроме этого, можно заработать самому, выставляя готовые учебные материалы на продажу здесь. Рейтинги и отзывы на преподавателей очень помогают сориентироваться в начале нового семестра. Спасибо за такую функцию. Ставлю максимальную оценку.
              Лучшая платформа для успешной сдачи сессии
              Познакомился со СтудИзбой благодаря своему другу, очень нравится интерфейс, количество доступных файлов, цена, в общем, все прекрасно. Даже сам продаю какие-то свои работы.
              Студизба ван лав ❤
              Очень офигенный сайт для студентов. Много полезных учебных материалов. Пользуюсь студизбой с октября 2021 года. Серьёзных нареканий нет. Хотелось бы, что бы ввели подписочную модель и сделали материалы дешевле 300 рублей в рамках подписки бесплатными.
              Отличный сайт
              Лично меня всё устраивает - и покупка, и продажа; и цены, и возможность предпросмотра куска файла, и обилие бесплатных файлов (в подборках по авторам, читай, ВУЗам и факультетам). Есть определённые баги, но всё решаемо, да и администраторы реагируют в течение суток.
              Маленький отзыв о большом помощнике!
              Студизба спасает в те моменты, когда сроки горят, а работ накопилось достаточно. Довольно удобный сайт с простой навигацией и огромным количеством материалов.
              Студ. Изба как крупнейший сборник работ для студентов
              Тут дофига бывает всего полезного. Печально, что бывают предметы по которым даже одного бесплатного решения нет, но это скорее вопрос к студентам. В остальном всё здорово.
              Спасательный островок
              Если уже не успеваешь разобраться или застрял на каком-то задание поможет тебе быстро и недорого решить твою проблему.
              Всё и так отлично
              Всё очень удобно. Особенно круто, что есть система бонусов и можно выводить остатки денег. Очень много качественных бесплатных файлов.
              Отзыв о системе "Студизба"
              Отличная платформа для распространения работ, востребованных студентами. Хорошо налаженная и качественная работа сайта, огромная база заданий и аудитория.
              Отличный помощник
              Отличный сайт с кучей полезных файлов, позволяющий найти много методичек / учебников / отзывов о вузах и преподователях.
              Отлично помогает студентам в любой момент для решения трудных и незамедлительных задач
              Хотелось бы больше конкретной информации о преподавателях. А так в принципе хороший сайт, всегда им пользуюсь и ни разу не было желания прекратить. Хороший сайт для помощи студентам, удобный и приятный интерфейс. Из недостатков можно выделить только отсутствия небольшого количества файлов.
              Спасибо за шикарный сайт
              Великолепный сайт на котором студент за не большие деньги может найти помощь с дз, проектами курсовыми, лабораторными, а также узнать отзывы на преподавателей и бесплатно скачать пособия.
              Добавляйте материалы
              и зарабатывайте!
              Продажи идут автоматически
              5137
              Авторов
              на СтудИзбе
              440
              Средний доход
              с одного платного файла
              Обучение Подробнее