Материалы к занятию 14

Создаем отдельные HTML-странички

 
     
  1. Создайте директорию Practice12, а в ней поддиректорию Images, в которой Вы будете хранить необходимые рисунки.

  2. Создайте заготовку (шаблон) web-странички по данному Вам образцу.

    В редакторе Far Manager создайте файл template.html. Наберите текст, приведенный в образце.
    Не забывайте, что кодировка должны быть "Win"!
    Откройте файл в Internet Explorer, посмотрите, что получилось.
    Образец специально создан так, чтобы Вам захотелось его отредактировать.

    Подберите цвета фона странички (bgcolor), основного шрифта (text) странички и горизонтальной линии (HR), используя код RGB.
    Подберите размер горизонтальной линии (аттрибут size).
    Впишите вместо слов "Фамилия, Имя" свои фамилию и имя.
    Откройте файл посредством Internet Explorer. Если страница выглядит неудовлетворительно, подредактируйте файл.

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

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

  3. Создайте страничку с изображением Вашего трипептида (tripeptide.html).

    Названием страницы (<TITLE>) сделайте название программы: ACD/ChemSketch. Заголовок текста — "русское" название трипептида (выравнивание по центру).

    Правило: стандартное название пептида составляется из названий входящих в него аминокислот, перечисляемых, начиная с N-конца, причем во всех названиях, кроме последнего, суффикс "-ин" меняется на "-ил", например, трипептид WRA называется триптофаниларгинилаланин, см. подробнее словарик.

    Создайте таблицу с невидимыми границами, из одной строки и двух столбцов. В левую ячейку поместите изображение структурной формулы Вашего трипептида, а в правую необходимые подписи, например: "Это первые (последние, …) аминокислотные остатки белка………" или "Красным цветом выделено….".

    Подсказка: Вам нужно создать отдельный графический файл (.gif). Выделите нужный рисунок в отчете за второй блок. Скопируйте его в буфер, откройте программу Paint (Programs → Accessories → Paint), вставьте рисунок (<Ctrl+V> или Edit → Paste) и сохраните его в файле xxx.gif директории Images с помощью кнопок File → Save as.

    В левую ячейку таблицы поместите <IMG src="Images/xxx.gif">.

    Совет: подберите оптимальные размеры рисунков, используя атрибуты width и height тега <IMG>.

  4. Создайте страничку с описанием общих характеристик белка по данным Вашего отчета за первый блок

    Название страницы — XXXX_ECOLI (краткое название Вашего белка).
    Заголовок текста — полное русское название белка, а в скобках полное английское (заголовок выровнен по центру).
    Совет: не стесняйтесь спросить преподавателя, как называется Ваш белок по-русски.

    Далее поместите текст, оформленный как список:

    • Краткое название белка: XXXX_ECOLI
    • Полное название организма: Escherichia coli, K-12
    • Название гена: xxxX.
    • Номер локуса в бактериальной хромосоме: x00000
    • Последовательность в формате FASTA (преформатированный текст, который лучше к тому же поместить в прямоугольник с чуть отличающимся фоном; как изготовить такой прямоугольник, попробуйте сообразить сами!)
    Далее поместите заголовок "Мои вычисления с помощью Excel".
    Совет: этот заголовок должен быть более низкого уровня по отношению к заголовку страницы.

    Далее поместите таблицу, состоящую из одной строки и двух столбцов.
    В левую ячейку поместите заголовок "Aминокислотный состав" и таблицу с аминокислотным составом, а в правую — текст следующего вида:

    Длина последовательности: 999 а.о.
    Молярная масса: 100000 г/моль.
    Средний заряд молекулы:
        при рН=7,0: +(или –)0,00,
        при рН=1,0: +(или –)100,00
    Отношение содержания гидрофобных остатков (список) к содержанию гидрофильных (список): ……; это позволяет думать, что данный белок является (или не является) мембранным.
    Совет: Вам нужно создать вложенную таблицу вида:
    Аминокислотный состав
    А (аланин) 10,2%
    С (цистеин) 0,5%

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

    Как красиво написать минус (–10, а не -10), см. в подсказках.

  5. Создайте страничку 3D.html с общим описанием 3D-структуры Вашего белка.

    Название страницы — "3D". Заголовок текста — "Описание пространственной структуры ….(название белка) по данным банка PDB, код 0XXX". Заголовок выровнен по центру. Далее поместите таблицу, состоящую из одной строки и 2-х столбцов. В левую ячейку поместите изображение Вашего белка, а в правую текст, объясняющий, что же, собственно говоря, изображено на рисунке.
    Дополнительно: между заголовком и таблицей поместите текст с общими характеристиками данной структуры, описанными в Вашем отчете.
    Дополнительно: добавьте к таблице вторую строчку: в левую ячейку вставьте элемент PRE (преформатирование) и в него скопируйте текст скрипта, а в правой напишите, для чего создан этот скрипт.

  6. Создайте страничку secondary_structure.html с описанием вторичной структуры Вашего белка.

    Название страницы — "Secondary structure".
    Заголовок текста — "Описание вторичной структуры ….(название белка)". Заголовок выровнен по центру.
    Далее поместите таблицу, состоящую из одной строки и двух столбцов. В левую ячейку поместите изображение вторичной структуры Вашего белка, в правую — текст, объясняющий условные обозначения, а также метод, с помощью которого Вы определяли вторичную структуру.

  7. Создайте страничку (ligand.html) с описанием области связывания лиганда

    Название страницы — "Ligand".
    Заголовок текста — "Изображение области связывания (название лиганда) с ....(название белка)". Заголовок выровнен по центру.
    Далее поместите таблицу, состоящую из одной строки и двух столбцов. В левую ячейку поместите изображение области, в правую ячейку — текст, объясняющий условные обозначения, а также метод, с помощью которого Вы выделяли данную область.

    Дополнительно: Поместите ниже (под соответствующим заголовком) описание Вашего плана генноинженерного эксперимента.