Системный подход

Воображаемые уроки с вымышленными учениками

Материалы

  1. Демонстрационный диск РУ. Конкурсы сайтов на курсе 42
  2. Словари на «Академике»
  3. Прочее
    • Лекция Методы научного познания
    • Учебник. ISBN: 5-94774-004-4.
      Информационное моделирование. Величины, объекты, алгоритмы Издательство: БИНОМ. Лаборатория знаний. 2002 г. Серия: Информатика.

Подведение итогов

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

К этому времени вы уже кое-что знаете и многое умеете. Давайте теперь все наши знания соберём вместе в один большой «мешок», хорошо перемешаем, высыпем на стол, разложим по кучкам и построим из всего этого общую структуру. Вы помните, для чего она нужна... (Для быстрого поиска)?

Именно понятная структура поможет вам легко и быстро размечать документы любой сложности. Но сначала «мешок».

Создайте файл, назовите его pouch.htm (удачное название -- поучительный мешок), добавьте ему заголовок «Пора идти дальше» и эпиграф «Наконец-то мы окончательно и полностью разобрались с тем, что же такое семантика HTML». (файлы для загрузки)

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

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

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

Правильное оформление

<!DOCTYPE html>
<HTML lang="ru"?>
··BODY
····ARTICLE
······H1Пора идти дальше/H1
······BLOCKQUOTE
Ну, вот наконец-то мы DELокончательно и/DEL INSну почти/INS
полностью разобрались с тем, что же такое DFNсемантика/DFN.
······/BLOCKQUOTE
····/ARTICLE
··/BODY

Правило. Если у блочного элемента всё вместе: открывающий и закрывающий теги, его содержимое и структурные отступы не длиннее 80 символов, то его можно записывать в одну строку. Именно так записан элемент H1.

Вот теперь почти всё готово. Обновите страницу в браузере и скажите, что стало с вашим текстом... (Изменился внешний вид слов-букв)? Как он изменился... (удалённый фрагмент зачёркнут, добавленный подчёркнут, термин выделен курсивом)? Почему именно так браузер изменил внешний вид фрагментов... (потому что применены семантические элементы и браузер отображает их роль)?

Нам тоже пора учиться управлять внешним видом текста, но сначала давайте вспомним, что такое текст? Из чего он состоит? И запишем это в созданный файл.

Метод познания Синтез

И так, самый маленький элемент текста... (символ)? Рассмотрим его как объект. Какие свойства символа изменял браузер... (шрифт, курсив, полужирный, размер, цвет)? Имя нашего объекта представим термином, а его свойства -- описанием. Какая конструкция из блочных элементов позволит нам записать термин и описание... (DL, DT, DD)?

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

Цель. Научиться, глядя на код HTML, представлять, как будет выглядеть страница. И наоборот: глядя на страницу представлять код HTML.

Как и решили начнём с символа.

······DL
········DTсимвол/DT
········DD
Свойства: шрифт, курсив, полужирный, размер, цвет
········/DD
······/DL

По традиции в словарях и справочниках сначала пишется элемент DT с названием термина, а DD с его описанием -- под ним. Так как мы исследуем текст «снизу вверх», то описание объекта расположим над ним. Поменяем местами DT и DD.

······DL
········DD
Свойства: шрифт, курсив, полужирный, размер, цвет
········/DD
········DTсимвол/DT
······/DL

Следующий элемент -- слово. Его тоже будем помещать в DL, но где поместить сам DL? Так как основа слова -- символы, то и поместим DL туда, где описаны их свойства, то есть в DD сверху над свойствами символов, но с учётом структурных отступов.

В DL сло́ва поместим DT с именем и над ним DD с описанием свойств.

······DL
········DD
··········DL
············DD
Свойства: интервал между буквами
············/DD
············DTслово/DT
··········/DL
Свойства: шрифт, курсив, полужирный, размер, цвет
········/DD
········DTсимвол/DT
······/DL

Далее -- объект предложение. Он состоит из слов. Добавим DL предложения с именем и описанием в DD сло́ва.

······DL
········DD
··········DL
············DD
··············DL
················DD
Свойства: интервал между словами
················/DD
················DTпредложение/DT
··············/DL
Свойства: интервал между буквами
············/DD
············DTслово/DT
··········/DL
Свойства: шрифт, курсив, полужирный, размер, цвет
········/DD
········DTсимвол/DT
······/DL

Из предложений в тексте составляется абзац. Нам осталось описать его как объект. Главной особенностью абзаца при чтении является выделенная первая строка. Допишите код самостоятельно.

······DL
········DD
··········DL
············DD
··············DL
················DD
··················DL
····················DD
Свойства: первая строка
····················/DD
····················DTабзац/DT
··················/DL
Свойства: интервал между словами
················/DD
················DTпредложение/DT
··············/DL
Свойства: интервал между буквами
············/DD
············DTслово/DT
··········/DL
Свойства: шрифт, курсив, полужирный, размер, цвет
········/DD
········DTсимвол/DT
······/DL

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

Что же у нас получилось? А получилась информационная модель системы текст.

Мы взяли для рассмотрения не весь текст целиком, а выбрали в нём самый маленький объект. Полученная схема похожа на перевёрнутую детскую пирамидку. Внизу находится самое маленькое кольцо -- простой объект Символ. С ним описаны его свойства, у которых можно изменять значения. При этом будет меняться внешний вид символа.

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

Особенности системы.

  1. Объекты, входящие в систему, называются элементы.
  2. Для каждого элемента определяется роль в системе.
  3. Между элементами устанавливаются связи, выстраиваются отношения взаимодействия и взаимовлияния.
  4. Устанавливается влияние свойств каждого элемента на систему в целом.

Управлять внешним видом слова можно изменяя значение его свойства (межбуквенное пространство). Но Слово, будучи системой, получает в своё владение и свойства символа. Например, к слову можно применить свойство размер и изменить его значение. Одновременно изменится размер всех символов в слове.

Изучение «Элементов» сложного объекта, определение их взаимодействия и взаимовлияния, называется «Системный подход».

Продолжим применять системный подход к частям исследуемого объекта «Текст». Предложение -- тоже система, так как включает в себя множество элементов -- Слово.

Система Предложение для системы Слово -- надсистема. И наоборот система Слово для Предложения -- подсистема.

Явные признаки системы:

  • связи -- множество элементов Слово входит в состав системы Предложение,
  • взаимодействие -- если отсутствуют элементы Слово, то не существует и системы Предложение,
  • взаимовлияние -- управлять внешним видом системы Предложение можно, применяя к нему, например, свойства элемента Символ из подсистемы Слово.

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

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

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

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

А вы не задумывались, как изучаете новый смартфон? Вскрыв корпус, вы ищите место для SIM-карты. Определяете -- одно или два? Если два -- то какое основное (1), а какое дополнительное (2). Затем размер гнёзд: mini-SIM, micro-SIM или nano-SIM. Далее гнездо для flash-карты, расположение контактов аккумулятора и т.д. Тоже системный подход -- от малых деталей до полной сборки и включения системы «Смартфон».

Метод, который мы использовали в системном подходе называется Синтез (др.греч: соединение, сочетание, составление). Это когда из малых элементов путём изучения их свойств и выстраивания связей между ними создаётся полноценная система.

Вы помните правила набора текста... (Да)? Сколько их... (4)? Как звучит третье... ()? А теперь представьте себе, что эти правила я продиктовал вам под запись в конспект, сегодня спрашиваю, а тетрадку вы забыли дома. Как быстро сообразили бы вы, что ответить на эти вопросы? А вообще, вспомнили бы правило №2... ()? Вывод: Знания нужно носить не в портфеле, а в голове (АБ).

Что такое Синтез... ()? Я полторы минуты назад (время произвольное, всё равно никто не следил) произнёс его определение. Это когда из малых знаний (роль пробела в редакторе, примеры с ошибками), путём изучения их свойств и выстраивания связей между ними создаётся новое знание. А где создаётся... (в голове!)?

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

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

У вас что-то не получается с учёбой? А ведь каждый предмет -- это система. Примените подобный приём: определите элементы системы, их взаимоотношение и взаимовлияние. Может быть, придётся вернуться на год-два назад, найти то место, почему-то пустое, где должны быть нужные знания... У вас получится. И в мире для вас одной тайной станет меньше.

Метод познания Анализ

Применим уже знакомый системный подход к изучению объекта «Документ». В чём особенность системного подхода... (рассматриваем объект, как составной, и представляем его в виде системы объектов. Определяем связи между ними и свойства каждого -- как они влияют на другие объекты и на систему в целом)?

И бумажные, и электронные документы имеют много общего. Общую для них информационную модель продолжим создавать в том же документе HTML. Но теперь в своих рассуждениях пойдём «от большого к малому». Поэтому записывать элемент DL будем обычным образом. Сначала Термин в элементе DT, а под ним описание в DD

Бумажный документ -- книга (литературное произведение, учебник, справочник...) состоит из листов: одного, нескольких или целой пачки. И электронный документ может состоять из «листов» -- веб-страниц. Например, литературное произведение в электронном виде и каждая глава на отдельной веб-странице.

Все листы бумажного документа, как правило, имеют одинаковые размер, цвет и качество. В браузере листов нет, только веб-страницы. Но отображаются они в рабочей области его окна. Рабочая область для каждой веб-страницы едина, например единый цвет фона. Будем её условно считать электроннвм «листом».

С листами разобрались. Возьмём к рассмотрению один лист.

······DL
········DTлист/DT
········DD
Свойства: размер, оформление
········/DD
······/DL

Объект Лист соствной объект. Каждый лист состоит из двух элементов Страница (для любопытных: кроме листа Мёбиуса). Лист -- это система объектов. И следующий рассматриваемый элемент этой системы -- Страница или веб-страница. У всех страниц имеются поля и на бумажных присутствуют колонтитулы, а на веб-страницах их роль выполняют «шапка» и «подвал».

······DL
········DTлист/DT
········DD
Свойства: размер, оформление
··········DL
············DTстраница/DT
············DD
Свойства: пол́я, колонтитулы
············/DD
··········/DL
········/DD
······/DL

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

······DL
········DTлист/DT
········DD
Свойства: размер, оформление
··········DL
············DTстраница/DT
············DD
Свойства: пол́я, колонтитулы
··············DL
················DTстатья/DT
················DD
Свойства: пол́я
················/DD
··············/DL
············/DD
··········/DL
········/DD
······/DL

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

······DL
········DTлист/DT
········DD
Свойства: размер, оформление
··········DL
············DTстраница/DT
············DD
Свойства: пол́я, колонтитулы
··············DL
················DTстатья/DT
················DD
Свойства: пол́я
··················DL
····················DTабзац/DT
····················DD
Свойства: пол́я, выравнивание, межстрочный интервал
····················/DD
··················/DL
················/DD
··············/DL
············/DD
··········/DL
········/DD
······/DL

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

Мы рассматривали систему не с мелких элементов, собирая из них очередной крупный. А наоборот: самый крупный элемент стали дробить на более мелкие, определяя их свойства. Подобный метод называется Анализ.

И документ, и его текст -- это одно целое, единый объект. Так почему же мы разбили его на две информационные модели?

Ответ. В информационной модели Текст рассматриваются в основном строчные элементы и их основные свойства. А в Документ -- блочные.

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

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

Мы разделили объекты на два класса по их основному признаку. Подобные действия называются классификация. Вы, может быть, и не задумывались, но постоянно пользуетесь этим инструментом. Ну-ка вспомните, где и когда?

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

А где вы применяете её в «другой» в не школьной жизни? У вас грязные рыбацкие сапоги хранятся в шкафу с чистым постельным бельём?

Обе информационные модели описывают один и тот же объект, но с разных сторон. Чтобы получить полную информационную модель Документ, их нужно объединить. Модель Документ поместить выше модели Текст.

Имея информационную систему можно узнать о свойствах документа не проводя практических изменений. Например, в документе есть элемент Символ и у него свойство «цвет», которому мы можем присвоить значение «зелёный». Что изменится... (цвет символа у которого изменено значение свойства станет зелёным, а остальные останутся прежними)? А если мы это же свойство применим не к символу, а к элементу Статья, то... (зелёными станут все символы статьи)?

Структурный метод

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

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

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

У нас есть элемент HTML. Он и элемент рассматриваемой системы, и, в то же время, элемент языка HTML. Так и будем называть всё элементами, подразумевая одновременно и то, и другое.

HTML включает в себя два элемента HEAD и BODY. Про HEAD на данном этапе мы знаем достаточно, но ещё не раз будем возвращаться к нему, узнавая что-то новое. Однако, в данной задаче он нам не интересен.

Сразу переходим к BODY. Не забываем про структурный отступ (2 пробела) и видим, что в нём есть только один элемент ARTICLE. Записываем и его с учётом структурных отступов.

В нашем коде в ARTICLE сколько помещено элементов... (4 -- H1, BLOCKQUOTE, DL-1, DL-5)? Какие это элементы... (блочные и они участвуют в построении структуры кода)? Так и запишем их в отдельных строках с одинаковым количеством структурных отступов.

Далее добавим элементы... (в BLOCKQUOTE добавим DEL, INS, DFN)?

Какие это элементы... (строчные, они не участвуют в построении структуры кода)? Запишем их все в одной строке от левого края после BLOCKQUOTE.

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

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

У учащегося         На доске
-----------         --------
HTML                HTML                               
  BODY              └► BODY                            
    ARTUCLE            └► ARTUCLE                      
      H1                  ├► H1                        
      BLOCKQUOTE          ├► BLOCKQUOTE                
DEL, INS, DFN             │  └► DEL, INS, DFN          
      DL  1               ├► DL   1                    
        DT                │  ├► DT            
        DD                │  └► DD            
          DL  2           │     └► DL   2         
            DT            │        ├► DT        
            DD            │        └► DD        
              DL  3       │           └► DL   3     
                DT        │              ├► DT    
                DD        │              └► DD    
                  DL  4   │                 └► DL   4 
                    DT    │                    ├► DT
                    DD    │                    └► DD
      DL... 5             └► DL... 5

Для экономии времени код второго блока Текст записывать не обязательно. Но каждый DL первого блока нужно пронумеровать.

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

Анализ структуры кода HTML
Сколько уровней структуры у нашего кода... (11)?
Сколько структурных отступов нужно для записи DL-5... (как и для DL-1 ровно 3 отступа)?
Сколько элементов на восьмом уровне... (1 -- DL)?
Сколько пробелов должно быть перед именем элемента на 6 уровне... (10)?
Структурный отступ уровня 2 пробела, а почему на шестом уровне не 12... (первый уровень HTML не имеет структурного отступа)?

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

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

Имена связей
Элементы, расположенные на одном уровне рядом друг с другом, называют братья или соседи. Назовите группы соседних элементов... (H1, BLOCKQUOTE DL-1, DL-5; парами на всех уровнях DT, DD)
Элементы внутри другого элемента -- дети. Элементы DT и DD дети по отношению к своему DL. Сколько элементов-детей у BLOCKQUOTE... (3 -- DEL, INS, DFN), а у DT в DL-2... (ни одного)?
В свою очередь DL по отношению к своим DT и DD -- родитель. Какой элемент будет родительским для INS... (BLOCKQUOTE)? Для DL-5... (ARTICLE)? А для DL-4... (DD из DL-3)?
Элементы и HTML, и BODY, и ARTICLE, и DL-1, и его DD для DT и DD из DL-2 -- предки. Назовите всех предков элемента DFN... (HTML, BODY, ARTICLE)?
А DL-3 потомок и для HTML, и для BODY, и для ARTICLE, и для DL-1, и для его DD и DL-2. Сколько потомков у DL-3... (3 -- DL-4 и его DT и DD)?

Вы помните, почему или из-за чего возникли правила набора текста... (из-за того как браузер интерпретирует пробел)?

А что будет, если не соблюдать эти правила... (текст на экране будет содержать пунктуационные ошибки)?

А можно ли, неправильно расставив структурные отступы, ошибиться в построении структуры кода документа HTML... (легко)?

А что произойдёт, если мы будем видеть ошибочный код и принимать его за правильный... (браузер будет «видеть» другую структуру документа, не ту, какую понимаем мы, и на экране отобразит совершенно не то, что мы ожидаем или вовсе ничего не отобразит)?

Что же «видит» браузер?

Браузер поэлементно читает код HTML. Каждый прочтённый элемент преобразует во фрагмент страницы. Это может быть какой-либо блок с текстом или изображением, или всё вместе. К свойствам фрагмента браузер применяет значения по умолчанию и отображает его на экране.

Если мы видим на странице не совсем то, что ожидали, значит где-то в коде допущена ошибка. Хотелось бы увидеть код «глазами» браузера. Если мы это сумеем, то сможем исправить свою ошибку.

Или наоборот, нам очень понравилась страница профессионального сайта, или какая-либо её часть. Как выглядит написанный мастером код, создающий понравившийся фрагмент? Хотелось бы проанализировать код мастера и создать на своём сайте что-то подобное.

У каждого браузера имеются инструменты для контроля его работы и, в частности, исполнения кода HTML. В браузерах Microsoft эти инструменты называются «Средства разработчика», их можно запустить через меню или нажав клавишу F12.

В браузерах Chromium «Средства разработчика» можно вызвать через пункты меню «Дополнительно» или «Дополнительные инструменты». А можно и нажать клавиатурный аккорд Ctrl + Shift + I.

В меню браузеров Firefox имеется пункт-подменю «Веб-разработка». Открыть инструменты веб-разработчика можно клавиатурным аккордом Ctrl + Shift + I. Если у вас установлена русскоязычная версия FIrefox, то и панель инструментов будет полностью на русском языке.

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

Инструменты веб-разработчика

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

В левом верхнем углу панели веб-разработчика цветом выделены две кнопки.

Зелёная

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

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

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

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

А если вам понравились отдельные фрагменты на разных страницах разных сайтов. Код, написанный мастером тоже можно проанализировать и в своей работе воссоздать подобный.

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

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

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

Подготовка к курсовому проекту "Команда разработчиков" (альбом курса) закончена.