2. Задания на лабораторные работы

   1. Форматирование текста

Разберем пример задания на форматирование текста.

1. Сделать заголовок второго уровня, цвет текста зеленый, выравнивание по центру, текст заголовка "Заголовок второго уровня".

2. Задать первый абзац: выравнивание по ширине, цвет текста задать в RGB-палитре (150,20,210), размер шрифта равен 1 сантиметру, тип шрифта Comic Sans MS, выделить слово Это курсивом. Текст абзаца "Это первый абзац, выровненный по ширине, цвет текста в RGB-палитре (150,20,210), размер шрифта равен 1 сантиметру, тип шрифта Comic Sans MS, выделить слово Это курсивом "

3. Задать второй абзац: выравнивание по правому краю, цвет текста задать в шестнадцатеричном написании ff33bb, размер шрифта равен 5 точкам, тип шрифта Arial, слово абзац сделать жирным. Текст абзаца "Это второй абзац, выровненный по правому краю, цвет текста в шестнадцатеричном написании ff33bb, размер шрифта равен 5 точкам, тип шрифта Arial, слово абзац сделать жирным "

Шаги выполнения работы:

Создать документ *.html (вместо звездочки написать любое имя).

В документе набрать html:5 и нажать ctrl+E, появится каркас web-страницы и между тегами <body></body> произвести форматирование текста.

Требуется ввести заголовок 2 уровня, прописываем h2 и нажимаем ctrl+E (Рис.44).

Далее сказано, что цвет заголовка зеленый, следовательно, в открывающем теге <h2> после цифры 2 устанавливаем курсор и начинаем вводить атрибут style. Набираем букву s и появляется выпадающий список с атрибутом style (Рис.45).

Нажать enter, атрибут style добавится автоматически.

После этого курсор будет находиться между кавычками атрибута style, начинаем набирать команду color, введя только первую английскую букву с появляется список css команд, выбираем в списке color (Рис.46).

Нажимаем enter, команда color добавится автоматически и после двоеточия прописываем значение green, отвечающее за зеленый цвет текста. Далее ставим точку с запятой и начинаем набирать команду text-align, отвечающую за выравнивание текста, со значением center, которое выравнивает текст по центру (Рис.47). Между открывающим и закрывающим тегом <h2></h2> набираем текст заголовка "Заголовок второго уровня" (Рис.48).

Далее в задании требуется ввести абзац. После закрывающего тега </h2> нажимаем enter и переходим на новую строку, прописываем тег p и нажимаем ctrl+E. Устанавливаем курсор в открывающем теге <p> после буквы р , нажимаем пробел и выбираем атрибут style. Далее сказано, что выравнивание абзаца по ширине, цвет текста задать в RGB-палитре (150,20,210), размер шрифта 1 сантиметр, тип шрифта Comic Sans MS. Для этого в кавычках атрибута style вводим css-команду text-align:justify, ставим точку с запятой и вводим css-команду color. После двоеточия вводим значение команды color:rgb(150,20,210). Далее ставим точку с запятой и вводим команду font-size:1cm. Ставим точку с запятой и вводим команду font-family: Comic Sans MS. Между открывающим и закрывающим тегом <p></p> вписываем текст абзаца, который дан в задании. Далее необходимо выделить слово Это курсивом. Находим данное слово в тексте и заключаем его между тегами <em></em>. Программа будет выглядеть следующим образом (Рис.49):

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

Аналогично сделать форматирование для второго абзаца.

2. Списки

Разберем пример задания со списком.

Дан следующий список:

В данном задании есть главный список, состоящий из 6 элементов (font-size, font-variant, text-transform, text-decoration, line-height, font-weight) и 3 подсписка: первый состоит из 3 элементов (lowercase, uppercase, capitalize), второй – из четырех элементов (underline, line-through, overline, none), третий – из двух элементов (pt, %) и русский текст прописан в тегах, отвечающих за элементы списка определений.

Шаги выполнения работы со списком:

Создать документ список.html.

В документе набрать html:5 и нажать ctrl+E, появится каркас web-страницы и между тегами <body></body> произвести построение списка. Для начала сделаем структуру списка, потом отредактируем вид номера и вид маркера пунктов меню.

Сначала запишем тег dl и нажмем ctrl+E, между тегами <dl></dl> нажимаем enter (Рис.50).

Видим, что элементы главного списка обозначены буквами и цифрами, следовательно, это нумерованный список, состоящий из 6 элементов. Набираем строчку ol>li*6 (Рис.51) и нажимаем ctrl+E.

Появился главный список. (Рис.52)

В третьем элементе есть подсписок. Устанавливаем курсор между тегами <li></li>, нажимаем enter и прописываем строчку ol>li*3 (элементы подсписка обозначены буквами и цифрами, следовательно, это тоже нумерованный список, состоящий из 3 элементов, Рис.53) и нажимаем ctrl+E.

Появился нумерованный подсписок, состоящий из 3 элементов, в третьем элементе главного списка (Рис.54).

В четвертом элементе тоже есть подсписок. Устанавливаем курсор между тегами <li></li>, нажимаем enter и прописываем строчку ul>li*4 (элементы подсписка обозначены маркерами, следовательно, это маркированный список, состоящий из 4 элементов, Рис.55) и нажимаем ctrl+E. Появился маркированный подсписок, состоящий из 4 элементов, в четвертом элементе главного списка.

В пятом элементе есть подсписок. Устанавливаем курсор между тегами <li></li>, нажимаем enter и прописываем строчку ol>li*2 (элементы подсписка обозначены буквами и цифрами, следовательно, это нумерованный список, состоящий из 2 элементов, Рис.56) и нажимаем ctrl+E. Появился нумерованный подсписок, состоящий из 2 элементов, в пятом элементе главного списка. Получили полную структуру списка (рис.57). Теперь изменяем вид номера и маркера элементов главного списка и подсписков, а также изменяем порядок нумерации там, где это требуется. Главный список начинается с буквы a маленькой и больше элементов, у которых нумерация – маленькие латинские буквы, поэтому в самом списке в теге ol пропишем атрибут type со значением a.

<ol type="a">

Второй элемент списка обозначен буквой e, нумерация списка идет не по порядку, т.к. за буквой a в английском алфавите идет буква b, поэтому, чтобы второй элемент имел нумерацию в виде буквы е, надо в самом элементе теге li прописать атрибут value со значением 5, т.к. буква е в английском алфавите занимает пятую позицию.

<li value="5">

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

Четвертый элемент списка обозначен числом 7, порядок не нарушается, т.к. буква а занимает шестую позицию в алфавите, поэтому мы меняем только вид номера, для этого прописываем в самом элементе списка теге li атрибут type со значением 1.

<li type="1">

Пятый элемент списка обозначен буквой H, порядок не нарушается, т.к. буква H занимает восьмую позицию в алфавите, поэтому меняем только вид нумерации, т.к. буква заглавная, для этого прописываем в самом элементе списка теге li атрибут type со значением А

<li type="А">

Шестой элемент списка опять обозначен буквой e, тут порядок нарушается, поэтому надо в самом элементе теге li прописать опять атрибут value со значением 5.

На данный момент программа будет выглядеть следующим образом (Рис.58):

Теперь рассмотрим первый подсписок в третьем элементе главного списка. Нумерация начинается не с единицы, а с числа пять римского большого, прописываем в теге ol атрибут type со значением I и атрибут start co значением 5.

<ol type="I" start="5">

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

В третьем элементе меняется только вид нумерации на маленькое римское число. Поэтому прописываем в теге li атрибут type со значением i.

Теперь программа выглядит так (Рис.59)

Рассмотрим второй подсписок в четвертом элементе главного списка. Он является маркированным и в нем больше элементов, имеющих вид маркера в виде контура круга, и только третий элемент имеет маркер в виде закрашенного прямоугольника. Поэтому в самом теге ul прописываем атрибут type со значением circle:

<ul type="circle">

В третьем элементе в теге li пропишем атрибут type со значением square:

<li type="square">

Теперь программа будет выглядеть (Рис.60)

Рассмотрим третий подсписок в пятом элементе главного списка. Он состоит из двух элементов, и нумерация начинается со второго элемента и вид номера представлен в виде маленькой латинской буквы b. Второй элемент подсписка так же имеет номер в виде маленькой латинской буквы n. Порядок нумерации нарушается, поэтому в теге ol прописываем атрибут type со значением a, в первом элементе в теге li прописываем атрибут value со значением 2, а во втором элементе прописываем атрибут value со значением 14, т.к. буква т в английском алфавите занимает 14 позицию.

<ol type="a">

<li type="2"></li>

<li type="14"><li>

</ol>

Теперь программа будет выглядеть (Рис.61)

Теперь между тегами <li></li> прописываем текст элементов списков, а после каждого закрывающего тега </li> в подсписках добавляем тег <dt></dt> (dt и нажать ctrl+E) и между тегами прописываем русский текст, где он прописан. Полностью программа списка выглядит следующим образом (Рис.62):

3. Таблицы

Данную таблицу создать с помощью двух файлов html и css.

Структура таблицы будет описана в html-документе, а всё оформление: цвет фона, цвет текста, выравнивание, размер и начертание шрифта; сделать во внешнем файле css с помощью стилей.

У данной таблицы прописать команду css, отвечающую за совпадение границ, а также сделать ширину таблицы 20% и высоту 200, и задать атрибут border равный 1.

Ячейки отформатировать следующим образом:

4,5,7- цвет фона синий, цвет шрифта желтый

1,6,10- цвет фона малиновый, цвет шрифта зеленый

3,8,9- цвет фона желтый, цвет шрифта серый

2- цвет фона коричневый, размер шрифта 14 точек

Шаги построения таблицы:

Создать два файла таблица.html и style.css.

В документе таблица.html создать каркас web-страницы (html:5 и нажать ctrl+E). В теле web-страницы создать структуру таблицы, которая состоит из 5 строк и 4 столбцов. Прописываем следующую команду table>tr*5>td*4 и нажимаем ctrl+E. Появится каркас таблицы.

Ячейки первой строки пустые, поэтому в каждой (между тегами <td></td>) прописываем неразрывный пробел, который обозначается &nbsp; Рассмотрим вторую строку. В ней 4 ячейки с текстом 1,2,3,4 и 4-ая ячейка объединяется с ниже стоящей, т.е. по рядам, поэтому в теге <td> используется атрибут rowspan со значением 2.

<td rowspan="2">4</td>

Две строчки в таблицы выглядят следующим образом (Рис.64):

Рассмотрим третью строчку таблицы. В ней только ячейка с текстом 5 и она объединена с двумя ячейками справа стоящими от нее, т.е. по столбцам, ячейка с текстом 4 учтена уже во второй строке таблицы. Поэтому прописываем в теге <td> атрибут colspan со значением 3, три другие ячейки удаляем в данной строке.

Рассмотрим четвертую строку таблицы. В ней 3 ячейки с текстом 6,7,8, причем ячейка с текстом 7 объединена как по столбцам, так и по рядам с рядом и ниже стоящей ячейками. Поэтому только в ней в теге <td> прописываем атрибут colspan со значением 2 и атрибут rowspan со значением 2, четвертую ячейку удаляем в данной строке. После написания четырёх строк таблицы программа выглядит так (Рис.65).

Рассмотрим пятую строку таблицы. В ней две ячейки с текстом 9 и 10. Две другие ячейки в данной строке удаляем. Теперь в теге table пропишем ширину и высоту таблицы, значение border равное 1. Совпадение границ сделаем во внешнем файле style.css. Если проверить в браузере данную таблицу, то можно будет заметить, что не все столбцы одинаковой ширины, поэтому в верхней строке пропишем в каждой ячейке ширину 25%, т.к. столбца всего 4. Документ таблица.html выглядит следующим образом (Рис.66).

Теперь переходим к файлу style.css.

В нем прописываем 4 стиля для форматирования ячеек таблицы и еще один стиль совпадения границ таблицы.

Т.к. первые четыре стиля будут применяться для ячеек таблицы, следовательно, пропишем 4 класса для ячеек td, например:

.a457

Затем вводим открывающую фигурную скобку, добавится автоматически закрывающая фигурная скобка (если не добавится, то ввести ее с клавиатуры), курсор будет находиться между ними. Нажимаем enter и начинаем прописывать css-команды данного стиля для ячеек с текстом 4,5,7.

После закрывающей фигурной скобки аналогично прописываем еще 3 стиля.

Последний пятый стиль будет называться table, а в фигурных скобках будет записана команда border-collapse:collapse;(Рис. 67)

Теперь надо связать документ таблица.html с документом style.css. Для этого в документе таблица.html после закрывающего тега </title> нажимаем enter, вводим link и нажимаем ctrl+Е, в атрибуте href вводим style.css. И в каждой ячейке, к которым применяются стили прописываем атрибут id с нужным значением стиля. Полностью документ таблица.html выглядит следующим образом (Рис.68):