Указания по выполнению работы. 1. Создайте простую таблицу, содержащую заголовки столбцов

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

2. При оформлении ячеек, создайте ячейки с тестом и графическими изображениями.

3. Доработайте таблицу. Включите в неё текстовые и графические ссылки на следующие страницы связанного HTML-документа (не менее 2-х ссылок на другие страницы).

4. Задайте таблице название, расположенное над ней.

5. Задайте различным строкам таблицы свой цвет фона ячеек.

6. Объедините в последней строке таблицы ячейки попарно.

7. Проверьте через браузер правильность выполнения заданий данной работы.

Сообщите преподавателю об окончании работы.

 

 

Контрольные вопросы

1. Какой атрибут задаёт цвет фона всей таблицы?

2. Если ширина таблицы не задана в пикселях, то чем определяется размер таблицы по ширине?

3. Может ли текст внутри ячейки представлять собой внешние или внутренние ссылки?

4. Может ли графика внутри ячейки представлять собой внешние или внутренние ссылки?

5. Можно ли несколько ячеек таблицы объединять в одну по горизонтали?

6. Можно ли несколько ячеек таблицы объединять в одну по вертикали.?

7. Для чего используются таблицы в HTML?

8. Если не задано выравнивание, то как размещается название таблицы и заголовки столбцов?

9. Если не задано выравнивание, то как размещается содержимое прочих ячеек?

10. Что такое составная ячейка?

Работа 9.3. CSS: таблица каскадных стилей в HTML

Цель работы: Знакомство с CSS. Использование CSS для глобального управления внешним видом документа. Создание классов стилей. Создание персональных стилей.

Порядок выполнения работы.

 

1. Изучить теоретическую часть

2. Выполнить задания в соответствии методическими указаниями

3. В конце лабораторной работы студенты должны представить отчёт по работе преподавателю и ответить на его вопросы

 

Теоретическая часть

CSS (англ. Cascading Style Sheets - каскадные таблицы стилей) - формальный язык описания внешнего вида документа, написанного с использованием языка разметки.

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

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

Необходимость появления CSS вызвана следующей причиной. С помощью  Html можно создавать структуру документов (вебстраницы). Например, можно задавать заголовки через теги H1-H6, абзацы P и другие элементы структуры документов, и даже придать им нужный нам вид в браузере. Но с течением времени возникают все новых и новых атрибуты визуального оформления, которые сильно захламляют исходный код HTML. В связи с этим был предложен другой, более перспективный вариант развития - создание отдельного языка стилевой разметки CSS. И этот вариант имел ряд преимуществ перед простым наращиванием количества атрибутов оформления.

Разработчики из W3C решили оформить все визуальные представления web документа в виде специального языка стилевой разметки, который назвали каскадными таблицами стилей или же попросту CSS, суть которого состоит в том, что подключая язык стилевой разметки к любым документам (страницам), разработчик страниц может задавать визуальное представление всех тех элементов (создаваемых Html тегами), которые будут встречаться в этом документе.

В данной работе суть этого подхода будет освоен на простых практических примерах.

Практическая часть

 

Задание 1. Оформление веб-страницы "Цвета и психология" с помощью стилей.

 

1. Запустите Блокнот и наберите текст HTML-файла (рис. 9.3.1).

Рис. 9.3.1. Структура HTML-кода

 

2. Сохраните файл под именем "Цвета и психология.html". Закройте Блокнот и просмотрите результат в браузере.

3. Закройте браузер. Откройте файл Цвета и психология.html в Блокноте с помощью контекстного меню.

4. Оформите внешнее представление веб-страницы с помощью каскадных стилей. Для этого необходимо создать таблицу стилей. Таблица стилей задаётся с помощью тега <STYLE>, который помещается в заголовок документа. Измените заголовок следующим образом:

<HEAD>

<TITLE>Цвет и психология</TITLE>

<STYLE>

H1 {font: 14pt Arial; margin:0 0 0 0}

</STYLE>

</HEAD>

 

5. Сохраните документ и просмотрите результат в браузере.

Примечание: Добавление этих строк изменило внешний вид всех заголовков H1. На этой веб-странице их 5, но вполне может быть и гораздо большее количество. Таблица стилей позволяет очень быстро сделать изменения внешнего вида, которые повлияют на все теги того или иного типа, причём, не нарушая внешнего вида других тегов. Вы только что создали стиль для всех тегов <H1>, который указывает, что должен использоваться шрифт Arial, а размер букв должен быть 14 пунктов (пункт - типографическая единица размера шрифта, равная 1/72 дюйма).

 

6. Закройте браузер. Откройте файл Цвета и психология.html в Блокноте с помощью контекстного меню.

7. Добавьте в таблицу стилей следующую строчку:

P {text-indent: 30; margin: 0 0 0 0}

Примечание: Свойство text-indent отвечает за отступ в первой строке. Свойство margin определяет минимальное расстояние от этого элемента до его соседей сверху, справа, снизу и слева. Набранная Вами строчка говорит о том, что теперь параграфы (т.е. то, что выделено с помощью тега <P>) будут иметь отступ в первой строке и не будут отделяться друг от друга пустыми строками (обнуление свойства margin).

8. Иногда возникает необходимость изменять стиль не всех тегов с данным наименованием, а только некоторой группы тегов. Это можно сделать с помощью так называемых классов. Практически для каждого тега можно задать атрибут CLASS, указав в качестве значения этого атрибута название класса. В таблице стилей можно задать стиль только для конкретного класса. Измените все теги <P>, кроме первого, следующим образом:

<P CLASS=colorinfo>

9. Таким образом, все параграфы, в которых идёт описание цветов, теперь принадлежат классу colorinfo. Вставьте в таблицу стилей такую строчку:

P.colorinfo {background:#E8E8E8}

Примечание: Этой строчкой Вы указали, что для всех параграфов класса colorinfo устанавливается блекло-серый фон.

10.  Сохраните документ и просмотрите результат в браузере (рис. 9.3.2).

Рис. 9.3.2. HTML страница, открытая в браузере

11. Закройте браузер. Откройте файл Цвета и психология.html в Блокноте с помощью контекстного меню.

12.  Иногда требуется указать стиль для одного конкретного тега. Такому тегу нужно задать идентификатор с помощью атрибута ID. Измените следующий тег:

<H1>Красный</H1>

на

<H1 id=red>Красный</H1>

13.  Задайте таким способом идентификаторы для каждого заголовка, назвав их red, cyan, yellow, orange и purple соответственно.

14. Теперь можно внести в таблицу "персональные" стили, которые будут действовать только на тег с определённым идентификатором. Персональные стили задаются с помощью символа #, после которого идёт идентификатор. Дополните таблицу стилей следующими строками:

#red {

color: red;

}

#cyan {

color: cyan;

}

#yellow {

color: yellow;

}

#orange {

color: orange;

}

#purple {

color: purple;

}

15.  Измените цвет фона. Без использования CSS это можно сделать с помощью атрибута BGCOLOR тега <BODY>, но это можно сделать и с помощью стилей. Добавьте в таблицу стилей такую строчку:

body {background: silver; font-family: courier}

16.  Сохраните результат и просмотрите файл в браузере (рис. 9.3.3).

Рис. 9.3.3. HTML страница, открытая в браузере

Примечание: В заголовках шрифт не изменился, так как для заголовков существует свой стиль, в котором указан шрифт Arial. На каждый элемент веб-страницы действует несколько стилей: некоторые более общие, некоторые более конкретные. Они выкладываются каскадом: более конкретные стили имеют больший приоритет, чем общие. В данном случае, изменение шрифта в стиле для <H1> перебивает изменение шрифта, заданное в более общем стиле для тега <BODY>.

17.  Закройте браузер.

 

Задание 2. Оформите следующий текст с помощью стилей.

 

Контрольные вопросы

1. Что такое CSS?

2. Для чего используются CSS?

3. Может ли CSS использоваться внутри HTML файлов?

4.?

5.?

 

Список литературы и источников

 

1. Верстка сайтов, электронный ресурс: http://htmlcssjs.ru/

2. Глоссарий.ru: Архитектуры компьютеров - Glossary.ru, Электронный ресурс. Доступ - http://www.glossary.ru/

3. Груздева Л.М., Дмитриев А.И., Лобачев С.Л. «Использование программ демонстрационной графики», Учебное пособие, М.: Юридический институт МИИТа, 2016, С-203.

4. Груздева Л.М., Лобачев С.Л., Чеботарева А.А. «Информационные технологии в профессиональной деятельности», Методические указания по выполнению практических работ, М.: Юридический институт МИИТа, 2015, С-129

5. Жёлтые страницы INTERNET, электронный ресурс, доступ: http://yp.piter.com/

6. Замятина О.М. «Вычислительные системы, сети и телекоммуникации. Моделирование сетей.», Юрайт, 2018, ЭБС Юрайт

7. Командная строка и её команды, электронный ресурс: http://vindavoz.ru/poleznoe/218-komandnaya-stroka-i-ee-komandy.html

8. КОМАНДНАЯ СТРОКА WINDOWS, электронный ресурс: http://allmbs.ru/cmd-01.html

9. Кузин А.В. «Компьютерные сети: учебное пособие, 3-е изд., перераб. и доп..», М.: Форум: Инфра-М, 2014, Библ. ЮИ МИИТа

10. Лобачев С.Л. «Зарубежные документационные цифровые информационные ресурсы Интернет», Методические указания по выполнению практических работ, М.: Юридический институт МИИТа, 2017, С-49

11. Марков Г.А. «Метрики стойкости парольной защиты», Молодежный научно-технический вестник, МВТУ им. Н.Э. Баумана, №2, 2013, Электронный журнал, Доступ: https://npo-echelon.ru/doc/psw-metrics.pdf

12. Платонов В.В. Программно-аппаратные средства защиты информации: учебник для вузов. - М.: Издательский центр «Академия», 2013.

13. Сайт, посвященный бесплатному мощному мультимедийному проигрывателю Media Player Classic (MPC) http://mpc.darkhost.ru/     

14. Сети и системы передачи информации: телекоммуникационные сети: учебник и практикум для академического бакалавриата / К. Е. Самуйлов [и др.]; под ред. К. Е. Самуйлова, И. А. Шалимова, Д. С. Кулябова. — М.: Издательство Юрайт, 2016.

15. Справочник по HTML, электронный ресурс: http://htmlbook.ru/html

16. Секреты формата GIF, электронный ресурс: http://www.artlebedev.ru/kovodstvo/sections/8/    

 

ПРИЛОЖЕНИЯ

 

Приложение 1

Форма отчёта

ОТЧЕТ

о выполнении практической работы по дисциплине

……………………………………………………………………………………………………………………………………………………………………………..