💸 Как сделать бизнес проще, а карман толще?

Тот, кто работает в сфере услуг, знает — без ведения записи клиентов никуда. Мало того, что нужно видеть свое раписание, но и напоминать клиентам о визитах тоже. Проблема в том, что средняя цена по рынку за такой сервис — 800 руб/мес или почти 15 000 руб за год. И это минимальный функционал. Нашли самый бюджетный и оптимальный вариант: сервис VisitTime.
⚡️ Для новых пользователей первый месяц бесплатно. А далее 290 руб/мес, это в 3 раза дешевле аналогов. За эту цену доступен весь функционал: напоминание о визитах, чаевые, предоплаты, общение с клиентами, переносы записей и так далее.
✅ Уйма гибких настроек, которые помогут вам зарабатывать больше и забыть про чувство «что-то мне нужно было сделать».
Сомневаетесь? нажмите на текст, запустите чат-бота и убедитесь во всем сами!

Текст предварительно подготовленной лабораторной работы

для последующего изменения (lab2.hm):

< HTML> < HEAD> < TITLE> Функциональные разделы документа < /TITLE> < /HEAD>

< BODY> < H1> Главный заголовок< /H1> < H2> Подзаголовок< /H2>

< HR> < A HREF=" #3.1" > Переход к третьему абзацу< /a>

< br> < H3> 1.1 Первый абзац< /H3>

Эти строки изображаются слитно, несмотря на то, что в

документе

они отделены

друг от друга

< HR> < H3> 2.1 Второй абзац< /H3>

Закрывающий тег для абзаца не обязателен.

< HR> < A Name=" 3.1" > < /a>

< H3> 3.1 Третий абзац< /H3> Тег начала абзаца более важен, чем реальный переход на новую строку. < HR>

Текст после горизонтальной линейки < BR> разбит на две строки.

< P> < H3 align=center> < B> Теперь построим линии< /H3> < /B>

< HR color=red size=16 width=100%>

< HR color=green size=8 width=50%>

< HR color=gold size=4 width=25%>

Перейдем к < A HREF=" pr6.htm" > тексту pr6 < /A> и обратно вернемся.

Перейдем к < A HREF=" DOG.JPG" > собачке < /A> и обратно вернемся.

< HR> Перейдем к рисунку< A HREF=" tu2.gif" > знамя < /A> и обратно вернемся.

< HR> < A HREF=" cat01.jpg" > котята < /A> и обратно.

< HR> < A HREF=" cat03.jpg" > кошка < /A> и обратно.

< HR> < A HREF=" dog03.jpg" > собака < /A>

< HR> < A HREF=" dog09.jpg" > другие собачки < /A>

< HR> < A HREF=" fish.jpg" > рыба < /A>

< HR> < IMG SRC=" dog09.jpg" >

< P> < IMG SRC=" fish.jpg" WIDTH=500 HEIGIT=250 border=2 align=" bottom" >

< P> < H3 ALIGN=center> Теперь создавайте сами такие же тексты с ссылками на рисунки< /H3>

< /BODY> < /HTML>

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

Организация бегущих строк и списков средствами HTML

Цель работы научить студентов:

• организовать бегущие строки в HTML-документах,
• работе с различными типами списков.

Бегущие строки

Теги < MARQUEE> и < /MARQUEE> образуют «бегущую строку» в окне броузера и используются со следую­щими параметрами:

< MARQUEE [ALIGN=" align" ] [BEHAVIOR=" behavior" ] [BGCOLOR=" #rrggbb" ] [DIRECTION=" direction" ] [HEIGHT=" integer" ] [HSPACE=" integer" ] [LOOP=" integer" ] [SCROLLAMOUNT=" integer" ] [SCROLLDELAY=" integer" ] [VSPACE=" integer" ] [WIDTH=" integer" ]> < /MARQUEE>

Вот их расшифровка.

ALIGN задает выравнивание «бегущей строки» и может принимать одно из следующих значений: TOP, MIDDLE, BOTTOM.

BEHAVIOR определяет характер текстовой анимации и принимает значения SCROLL, SLIDE, ALTERNATE.

BGCOLOR определяет фоновый цвет (в шестнадцатеричном формате RGB или как одно из английских названий цвета) «бегущей строки».

DIRECTION задает направление движения текста. Возможны значения LEFT и RIGHT, но по умолчанию установлено LEFT.

HEIGHT — целое число, определяющее высоту «бегущей строки» в пиксе­лях. Может также определяться в процентах (%).

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

LOOP — целое число, определяющее количество повторений «бегущей

строки». Может принимать значение INFINITE (бесконечно).

SCROLLAMOUNT — целое число, определяющее расстояние в пикселях, на которое текст перемещается за один шаг.

SCROLLDELAY — целое число, указывающее интервал между шагами в миллисекундах.

VSPACE — целое число, задающее размеры верхнего и нижнего полей в пикселях между внешним краем «бегущей строки» и окном броузера.

WIDTH — целое число, задающее ширину «бегущей строки» в пикселях. Может определяться в процентах (%).

Следующий пример 3.1 иллюстрирует использование тегов < MARQUEE> < /MARQUEE> и их атрибутов:

< HTML> < HEAD> < TITLE> Пример 3-1 < /TITLE> < /HEAD>

< BODY text=red>

< CENTER>

< H2> Бегущие строки < /H2> < HR>

< H3> < MARQUEE BGCOLOR=" Yellow" BEHAVIOR=" SCROLL" DIRECTION=" RIGHT" SCROLLAMOUNT=" 10" SCROLLDELAY=" 200" WIDTH=" 90%" > Это бегущая строка < /MARQUEE>

< P> < MARQUEE BGCOLOR=" Green" BEHAVIOR=" SCROLL" DIRECTION=" LEFT"

HEIGHT=30 SCROLLAMOUNT=" 10" SCROLLDELAY=" 100" VSPACE=" 40"

WIDTH=" 90%" > Это другая бегущая строка < /MARQUEE> < /H3>

< HR> < /CENTER> < /BODY>

< /HTML>

Организация текста внутри документа

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

Ненумерованные списки: < UL>... < /UL>

Текст, расположенный между метками < UL> и < /UL>, воспринимается как ненумерованный список. Каждый новый элемент списка следует начинать с метки < LI>. Например, чтобы создать вот такой список:

· ручки;

· карандаши;

· краски

необходим вот такой HTML-текст (пример 3-2):

< HTML> < HEAD> < TITLE> Пример 3-2 < /TITLE> < /HEAD>

< BODY text=green>

< H2 FLIGN=CENTER> Маркированный список < /H2> < HR>

< UL>

< LI> ручки;

< LI> карандаши;

< LI> краски

< /UL>

< HR> < /BODY>

< /HTML>

Обратите внимание: у метки < LI > нет парной закрывающей метки.

Нумерованные списки: < OL>... < /OL>

Нумерованные списки устроены точно так же, как ненумерованные, только вместо символов, выделяющих новый элемент, используются цифры. Если слегка модифицировать наш предыдущий пример (3-3):

< HTML> < HEAD> < TITLE> Пример 3-3 < /TITLE> < /HEAD>

< BODY text=green>

< H2 FLIGN=CENTER> Нумерованный список < /H2> < HR>

< OL>

< LI> ручки;

< LI> карандаши;

< LI> краски

< /OL>

< HR> < /BODY>

< /HTML>

получится вот такой список:

1. ручки;

2. карандаши;

3. краски

Списки определений: < DL>... < /DL>

Список определений несколько отличается от других видов списков. Вместо меток < LI> в списках определений используются метки < DT> (от английского definition term — определяемый термин) и < DD> (от английского definition definition — определение определения). Разберем это на примере (3-4, первая часть):

< H3 FLIGN=CENTER> Длинные определения < /H3>

< DL>

< DT> HTML

< DD> Термин HTML (HyperText Markup Language) означает 'язык маркировки гипертекстов'. Первую версию HTML разработал сотрудник Европейской лаборатории физики элементарных частиц Тим Бернерс-Ли.

< DT> HTML-документ

< DD> Текстовый файл с расширением *.htm (Unix-системы могут содержать файлы с расширением *.html).

< /DL>

Этот фрагмент будет выведен на экран следующим образом:

Обратите внимание: точно так же, как метки < LI>, метки < DT> и < DD> не имеют парных закрывающих меток.

Если определяемые термины достаточно коротки, можно использовать модифицированную открывающую метку < DL COMPACT>. Например, вот такой фрагмент HTML-текста (пример 3-4, вторая часть):

< HR> < H3 FLIGN=CENTER> Короткие определения < /H3>

< DL COMPACT>

< DT> А

< DD> Первая буква алфавита

< DT> Б

< DD> Вторая буква алфавита

< DT> В

< DD> Третья буква алфавита

< /DL>

будет выведен на экран примерно так:

А Первая буква алфавита

Б Вторая буква алфавита

В Третья буква алфавита

Вложенные списки

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

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

Наши знания о списках можно вкратце свести в пример 3-5:

< html> < head> < title> Пример 3-5< /title> < /head>

< body>

< H1> HTML поддерживает несколько видов списков < /H1>

< DL>

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

< DD> Элементы ненумерованного списка выделяются специальным

символом и отступом слева:

< UL>

< LI> Элемент 1

< LI> Элемент 2

< LI> Элемент 3

< /UL>

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

< DD> Элементы нумерованного списка выделяются отступом слева, а

также нумерацией:

< OL>

< LI> Элемент 1

< LI> Элемент 2

< LI> Элемент 3

< /OL>

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

< DD> Этот вид списков чуть сложнее, чем два предыдущих, но и выглядит более эффектно.

< P> Помните, что списки можно встраивать один в другой, но не следует закладывать слишком много уровней вложенности. < /P>

< P> Обратите внимание, что внутри элемента списка может находиться несколько абзацев. Все абзацы при этом будут иметь одинаковое левое поле. < /P>

< /DL>

< /body> < /html>

Результат этого фрагмента программы: