Лабораторная работа №1 Создание Web-страницы с помощью языка html и css
Задание к лабораторной работе. C помощью непосредственного редактирования тэгов языка HTML создать web-страницу ассоциации поставщиков «Мой офис» (рис.1), связанную с другими страницами.
Рис.1. Страница «Мой офис»
Задание 1. Создать web-страницу, содержащую форматированный текст и списки.
Создать на диске рабочую папку (например, d:\ivanov1).
С помощью команды главного меню Windows Программы|Стандартные|Блокнот запустить приложение Блокнот, предназначенное для редактирования текста в формате ASCII символов (неформатированный текст). Для того, чтобы текст документа размещался в окне Блокнота полностью, включить режим Перенос по словам меню Формат.
Создать в Блокноте новый файл, содержащий текст пустого документа HTML:
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
Сохранить
файл в рабочей папке с именем office.
htm.
При сохранении из блокнота выбрать в
качестве типа файла Все
файлы. В
рабочей папке должен появиться файл со
значком .
Просмотреть пустую
web-страницу office.htm в браузере MS
Internet
Explorer,
открыв его из окна Проводника Windows
(Мой компьютер) двойным щелчком мыши.
Проанализировать содержимое заголовка
окна MS
Internet
Explorer
(в заголовке отображается имя файла с
указанием полного пути к нему).
В окне браузера перейти в режим просмотра web-страницы, выполнив команду Вид|Просмотр HTML-кода. Команда позволяет просматривать код документа с подсветкой тэгов, их параметров и значений параметров различными цветами.
Открыть web-страницу office.htm для дальнейшего редактирования с помощью приложения Блокнот (щелкнуть правой кнопкой мыши на значке файла страницы в окне Проводника Windows или Мой компьютер и выбрать команду Открыть с помощью).
Изменить заголовок страницы, для этого
в качестве содержимого тэга TITLE ввести текст «Мой офис» (после открывающей
и перед закрывающей частью тэга TITLE).
Изменить заголовок страницы, для этого
в качестве содержимого тэга TITLE ввести текст «Мой офис» (после открывающей
и перед закрывающей частью тэга TITLE).<title>Мой офис</title>
Сохранить произведенные изменения.
Перейти в окно браузера и просмотреть в нем отредактированную web-страницу, нажав кнопку
Поместить в тело страницы текст:
Открыть приложение MS Word 2007, вызвать справку Word, щелкнув на кнопке , выбрать раздел справки Новые возможности / Новые возможности Microsoft Office Word, щелкнув на соответствующих ссылках в окне справки.
Выделить мышью текст открытого раздела справки, исключая рисунок в начале раздела, и скопировать его в окно блокнота (вставить текст в качестве содержимого тэга BODY – после открывающей, но перед закрывающей его частью). Заключить текст справки в тэг абзаца P.
<body>
<p>
— Текст справки —
</p>
</body>
Добавить перед вставленным блоком текста (сразу после открывающего тэга BODY) новую строку «Новые возможности» оформив ее как отдельный абзац, для чего заключить ее в тэг P (добавить перед текстом строки открывающую, а после текста – закрывающую часть тэга P).
<p>Новые возможности</p>
Выделить первую строку «Новые возможности» жирным шрифтом, заключив ее в тэг STRONG.
<p
ВНИМАНИЕ! Следует строго соблюдать вложенность тэгов. И открывающий, и закрывающий тэги форматирования символов текста (STRONG, EM и др.) должны помещаться внутри тэга абзаца (P, DIV и др.). Закрывающая часть вложенного тэга должна размещаться раньше закрывающей части содержащего его тэга.
Разбить текст на отдельные абзацы (как это было в справке Word), вставив в коде страницы после каждого абзаца непарный тэг перевода строки BR, не имеющий закрывающей части. Например, начало кода с текстом будет выглядеть следующим образом:
<p><strong>Новые возможности</strong></p>
<p>
Microsoft
Office Word 2007 с новым интерфейсом помогает
создавать профессионально оформленные
документы, предоставляя набор разнообразных
средств для создания и форматирования
документов.
Широкие возможности
редактирования, записи примечаний, а
также сравнения текстов позволяют
быстро собирать и обрабатывать отзывы
коллег. Передовая система объединения
данных обеспечивает сохранение связи
документов с важными источниками деловой
информации.
<br>
Предполагаемое действие:
<br>
———————————————-
Создание профессионально оформленных документов
<br>
Совместная работа над документами с сохранением конфиденциальности
<br>
Документы без границ
<br>
Восстановление после сбоев в работе компьютера
<br>
———————————————-
Создание профессионально оформленных документов
<br>
В
Office Word 2007 предусмотрены все необходимые
инструменты для редактирования и
проверки текстов, что дает возможность
с небывалой легкостью создавать
безупречно подготовленные документы.
<br>
Заменить текстовые линии (представляющие собой последовательности знаков -) на линии HTML:
В коде страницы удалить текстовую линию и вставить на ее место непарный тэг горизонтальной линии HR, задав следующие свойства линии: выравнивание по центру (параметр ALIGN), длина 80% от ширины окна браузера (параметр WIDTH) и толщина в 2 пикселя (параметр SIZE):
<hr align=”center” width=”80%” size=”2”>
Вставить тэг HR вместо второй текстовой линии. Изменить цвет нижней линии, добавив в тэг HR параметр COLOR с выбранным значением цвета. В качестве значения этого параметра можно использовать английские названия основных цветов (см. Приложение. Фоновые цвета).
Выделить строку текста «Предполагаемое действие» курсивом, заключив ее в тэг EM.
<em>Предполагаемое действие:</em>
В последующем тексте выделить жирным курсивом текст абзацев, играющих роль подзаголовков (как, например, строка «Создание профессионально оформленных документов» после разделительной линии), используя совместно тэги STRONG и EM.
Например:
Например:<hr align=”center” width=”80%” size=”2”>
<strong><em>Создание профессионально оформленных документов</
<br>
Для абзацев, расположенных ниже второй горизонтальной линии задать отступ от левой границы страницы, заключив блок текста в тэг BLOCKQUOTE (рис.2). Закрывающая часть тэга BLOCKQUOTE должна располагаться перед закрывающей частью тэга P, содержащего текст.
Перед первой строкой текста добавить новый текст «Состав офиса», выделить его в отдельный абзац (тэг P), задать жирный шрифт (тэг STRONG).
Рис.2. форматирование абзацев на web-странице
Ниже текста «Состав офиса» добавить еще две строки текста: «Стандартный комплект поставки», «Дополнительно устанавливаемые приложения», не заключая их в тэг P.
Оформить эти строки как нумерованный
список. Для этого:
Оформить эти строки как нумерованный
список. Для этого:В результате верх web-страницы должен принять вид как на рис.3.
После первого элемента нумерованного списка (Стандартный комплект поставки) добавить в столбик названия приложений «Word», «Excel», «Access», «Outlook», «PowerPoint», «InfoPath», «Publisher». Оформить перечень приложений как маркированный список. Для этого весь перечень заключить в тэг маркированного списка UL, а каждое из названий приложений – в тэг элемента списка LI.
Рис.3. Нумерованный список на web-странице
После второго элемента нумерованного списка (Дополнительно устанавливаемые приложения) добавить в столбик названия приложений «FrontPage», «Project». Оформить перечень приложений как маркированный список.
Изменить внешний вид маркера первого вложенного списка на закрашенный круг. Для этого для параметра TYPE
Параметр и его значение указываются в
открывающей части тэга UL:<ul type = ”disc”>
Изменить внешний вид маркера второго вложенного списка на закрашенный квадрат. Для этого для параметра TYPE тэга маркированного списка следует задать значение square (рис.4).
Рис.4. Вложенные списки на web-странице
Задать цвет фона страницы с помощью параметра BGCOLOR тэга BODY. В качестве значения этого параметра можно использовать английские названия основных цветов (см. Приложение. Фоновые цвета).
Наверху web-страницы разместить заголовок:
Как создать веб страницу с использованием HTML
- Создание сайта на Adobe Dreamweaver
- Форматирование текста в HTML
- Создание списков
- Гиперссылки
- Создание таблиц в блокноте
- Цвета в HTML
- Как создать форму в HTML?
- Табличная верстка сайта
- Теги в HEAD
- Изображения в html
- CSS
- Работа с текстом и изображениями в CSS
- Блочная структура сайта
- Блочная верстка
Давайте приступим к наполнению нашей первой веб страницы.
Dreamweaver позволяет наполнять сайт текстом двумя путями. Стоит отметить, что вы таким же образом можете создать сайт в блокноте, но данная программа дает больше преимуществ, т.к. является визуальным редактором.
Полезная реклама: многие российские банки уже ввели комиссию на валютные счета, чтобы сохранить накопления и оплачивать зарубежные сервисы, рекомендуем открыть банковскую карту в Белоруссии, Казахстане или Киргизии. Это можно сделать без посещения страны через надежного посредника.
Щелкните мышкой в конце тега <body>( цифра 1) и нажмите Enter. Потом напишите: «Привет мир». Вы увидите, как в области дизайна появилось то, что вы написали. Щелкните в области дизайна (цифра 2) в конце слова мир, нажмите Enter и напишите: «Это размер заголовка раздела». Надпись одновременно появится в области кода. Мы можем выбирать сами, как нам удобно наполнять сайт.
Теперь сами напишите ниже этих надписей: «Это размер заголовка статьи».
И ниже: «Это параграф. Таким шрифтом пишут статьи».
В итоге у вас должно получиться как на рис. 2
В самом низу у вас должна быть панель форматирования. Если ее нет, то зайдите во вкладку Window и щелкните Properties или нажмите Ctrl+F3.
Выделите слова «Привет мир». Нажмите на кнопку «выровнять по центру» на панели форматирования (цифра 1). Потом выберите из списка Format подпункт Heading1 (цифра 2). Посмотрите в области кода на теги, которые окружают слово «Привет мир»:
<h2 align="center">Привет мир</h2>
Сейчас мы познакомились с первым текстовым тегом <h2>. По умолчанию это самый большой формат заголовка на сайте. Этим тегом обозначают название сайта в тексте, либо самый главный заголовок. Этот тег имеет атрибут align=»center». Атрибут- это добавление к тегу, которое наделяет тег дополнительными свойствами. Браузер же интерпретирует нашу строку так: слова Привет мир разместить по центру и увеличить до формата самого большого заголовка.
Пощелкайте теперь на кнопках справа и слева от кнопки «выровнять по центру» и увидите, как меняется текст (почти как в Word). Обратите внимание, как меняется код.
Выделите слова «Это размер заголовка раздела». Снова нажмите на кнопку «выровнять по центру», а потом выберите из списка Format подпункт Heading2, которому соответствует тег <h3>. Этим тегом обозначают формат заголовка раздела.
Выделите слова «Это размер заголовка статьи». Выровняйте по центру и присвойте тег <h4>. Этим тегом обозначают формат заголовка статьи.
Выделите слова «Это параграф. Таким шрифтом пишут статьи». Выровняйте по центру и присвойте из списка Format подпункт Paragraph. Этому подпункту соответствует тег <p>. Обычно таким тегом оформляются все остальные текстовые части сайта.
На панели управления также есть и другие способы форматирования текста. Так в списке Font (цифра 3) мы можем выбрать шрифт текста сайта, а в списке Size размер шрифта (цифра 4), рядом список, где мы можем выбрать, в каких единицах мы задаем размер шрифта ( в пикселях, точках или еще в чем то на выбор).
Для начала этих базовых инструментов форматирования текста вполне достаточно, чтобы наш текст на сайте выглядел красиво.
Сохраните то, что мы сейчас напечатали: правой кнопкой по index.html (цифра 5) выбрать пункт Save. После этого вы можете просмотреть свою страницу в браузере. Для этого щелкните в любом месте страницы и нажмите F12.
В следующей главе мы научимся создавать списки и меню.
Adobe Dreamweaver
205T Компьютерные приложения в фармации
Применение компьютера в фармации включено в компьютерные программы аптечной программы по следующим темам
ЕДИНИЦА – I Шестнадцатеричные системы счисления, преобразование десятичной в двоичную, двоичной в десятичную, восьмеричной в двоичную и т. д., двоичное сложение, двоичное вычитание – дополнение до единицы, метод дополнения до двойки, двоичное умножение, двоичное деление
Концепция I Информационные системы и программное обеспечение
I Сбор информации, анализ требований и осуществимости, диаграммы потоков данных, спецификации процесса, проектирование ввода/вывода, жизненный цикл процесса, планирование и управление проектом
UNIT –II
Веб-технологии
Введение в HTML, XML, CSS и языки программирования, введение в веб-серверы и серверные продукты Введение в базы данных, MYSQL, MS-ACCESS, базу данных Pharmacy Drug
UNIT – III
Применение компьютеров в фармации
Хранение и поиск информации о лекарствах, фармакокинетика, математическая модель в дизайне лекарств, больничная и клиническая аптека, электронные системы выписывания рецептов и выписки, идентификация лекарств по штрих-коду и автоматизированный отпуск лекарственных средств, мобильная техника и мониторинг приверженности Диагностическая система, Лабораторно-диагностическая система, Система мониторинга пациентов, Фарма-информационная система
Блок-IV
Биоинформатика
ВВЕДЕНИЕ, Цель биоинформатики, базы данных биоинформатики, концепция биоинформатики, влияние биоинформатики в вакцине Discacine
9000 9000 9000 9000 9000 9000 .
