Если у вас возникли сложности с курсовой, контрольной, дипломной, рефератом, отчетом по практике, научно-исследовательской и любой другой работой - мы готовы помочь.
Предоплата всего
Подписываем
|
ҚАЗАҚ ҰЛТТЫҚ МЕДИЦИНА УНИВЕРСИТЕТІ |
КАЗАХСКИЙ НАЦИОНАЛЬНЫЙ МЕДИЦИНСКИЙ УНИВЕРСИТЕТ ИМЕНИ С.Д. АСФЕНДИЯРОВА |
|
|
МОДУЛЬ ИНФОРМАТИКА МЕТОДИЧЕСКАЯ ПОСОБИЯ |
Тема № 9. Сетевые технологии. Интернет. Основы языка HTML
Цель: Изучить основы компьютерных сетей, помочь студентам понять основы концепции и принципы создания компьютерных сетей, научить проводить поиск информации.
Формирование умений и навыков создания HTML-документа, вставки графических объектов в HTML-документ а также, привитие студентам практических навыков по разработке Web – страниц.
Задачи обучения: Формирование понятий о сетях, предпосылок и необходимости сетевого взаимодей ствия компьютеров, об аппаратном и программном обеспечении, глобальных и локаль ных сетях, топологии сетей и способах передачи данных, о базовых технологиях, протоколах и стандартах локальных сетей.
Формирование умении и навыков создания HTML-документа, вставки графических объектов в HTML-документ.
Перекличка студентов и выяснение причин отсутствия студентов, кто не готов к занятию, проверка конспектов.
Количество формируемых компетенций: практические навыки, коммуникативные навыки.
Основные вопросы темы: - 45 мин
КРАТКАЯ ТЕОРИЯ
Комьютерные сети
При физическом соединении двух или более компьютеров образуется компьютерная сеть. Компьютерная сеть – это группа компьютеров, объединенных каким-либо способом так, что люди могут совместно использовать информацию и оборудование. Компьютеры могут быть объединены в одной комнате, в одном здании, в разных частях города или мира.
В общем случае, для создания компьютерных сетей необходимо специальное аппаратное обеспечение (сетевое оборудование) и специальное программное обеспечение (сетевые программные средства). Простейшие соединение двух компьютеров для обмена данными называется прямым соединением. Для создания прямого соединения компьютеров, работающих в операционной системе Windows XP, не требуется ни специального аппаратного, ни программного обеспечения. В этом случае аппаратными средствами являются стандартные порты ввода/вывода (последовательный или параллельный), а в качестве программного обеспечения используется стандартные средство, имеющееся в составе операционной системы.
Локальные и глобальные сети.
В соответствии с используемыми протоколами компьютерные сети принято разделять на локальные (LAN – Local Area Network) и глобальные (WAN – Wide Area Network). Компьютеры локальной сети используют единый комплект протоколов для всех участников. По территориальному признаку локальные сети отличаются компактностью. Они могут объединять компьютеры одного помещения, этажа, здания, группы компактно расположенных сооружений. Глобальные сети имеют, как правило, увеличенные географические размеры. Они могут объединять как отдельные компьютеры, так и отдельные локальные сети, в том числе и использующие различные протоколы. Для связи между собой нескольких локальных сетей, работающих по разным протоколам, служат специальные средства, называемые шлюзами. Шлюзы могут быть как аппаратными, так и программными. Например, это может быть специальный компьютер (шлюзовый сервер), а может быть и компьютерная программа. Для обеспечения сетевой безопасности между локальной и глобальной сетью устанавливают так называемые брандмауэры. Брандмауэрам может быть специальный компьютер или компьютерная программа, препятствующая несанкционированнаму перемещению данных между сетями.
Несмотря на то, что существует много различных способов объединить компьютеры , по существу есть два типа компьютерных сетей: однораноговая сеть (Peer-to-Peer Network) и сеть клиент-сервер (Client/Server Network).
Что такое одноранговая сеть? Одноранговая сеть (Peer-to-Peer Network) - это объединение равноправных компьютеров.
Обычно одноранговая сеть объединяет не больше 10 компьютеров и организуется в домах или небольших офисах. Для того, чтобы использовать текстовые редакторы, такие как Microsoft Word, необходимо будет установить компьютерную программу как на свой компьютер, так и на других компьютерах.
Сервером в общем случае называется компьютер, к которому можно получить доступ через сеть и ресурсы которого можно использовать.
Сеть клиент-сервер чаще встречается в таких организациях, как университет, предприятие или библиотека, а не в домашних условиях. В таком типе сетей один компьютер, называемый сервером, является сердцем сети. Он хранит информацию и ресурсы и делает их доступными другим компьютерам данной сети. Остальные компьютеры, использующие сеть для получения этой информации называются клиентами. Если вы пойдете в библиотеку для того, чтобы найти книгу, вы садитесь за компьютер-клиент, а получаете информацию с сервера. Когда вы хотите получить информацию с сайта MSN, вы сидите за своим компьютером, который выступает в роли клиента, и получаете информацию из сети, называемой Интернет, с сервера MSN. Когда вы идете к врачу, в регистратуре используют компьютер-клиент, чтобы соединиться с сервером по сети и получить информацию о вас, хранящуюся на сервере. Все это -примеры использования сети клиент-сервер.
Сети клиент-сервер являются наилучшим вариантом для объединения в сеть более десяти компьютеров. Они более дорогие, чем одноранговые сети, но для больших компаний или в случаях, когда необходимо хранить большой объем информации, это самый лучший выбор.
Работа сети основана на том, что все элементы оборудования тем или иным способом соединены друг с другом. Каждый компьютер и оборудование, такое как принтеры, сканеры, портативные компьютеры и «наладонники», объединяются с помощью кабеля различного размера, спутниковой связи или телефонных линий. Сегодня существуют даже беспроводные сети, соединяющие компьютеры с помощью радиоволн.
Для сетей существует несколько типов разъемов, в которые включаются кабели, например, разъемы на сетевых адаптерах (network interface cards). Сетевой адаптер, или NIC, - это встроенное устройство, которое позволяет вам присоединить ваш компьютер в сеть. Вы или вставляете кабель в сетевой адаптер, или он транслирует сигнал, если у вас есть беспроводная сеть. На каждом компьютере установлено программное обеспечение, которое позволяет ему связываться с другими компьютерами.
Компьютеры могут сообщаться друг с другом, потому что существуют наборы правил, или протоколы, которые помогают компьютерам понимать друг друга. Протоколы необходимы для того, чтобы процесс связи проходил без ошибок. Протоколы помогают определить, как отправляется информация и как ее получить.
Сетевые протоколы необходимы по той же причине, по которой протокол или правила нужны людям для общения. Например, если вы называете предмет, на котором сидите, «стулом», а ваш сосед называет это «камнем», то у вас возникнут сложности в понимании друг друга. Иногда это применимо не только к словам. Способы общения людей требуют также набора определенных правил.
Основы функционирования Интернета
Протокол TCP/IP(Transmission Control Protocol/Internet Protocol) – один из протоколов приема/передачи данных, ипользуемый в настоящее время в компьютерных сетях. На самом деле этот протокол включает в себя несколько протоколов. Название протокола состоит из двух частей:
Интернет
Интернет – самая большая и самая известная в мире сеть, объединяющая миллионы компьютеров в огромную сеть сетей.
Слово Интернет означает международную сеть (INTERnational NETwork) , это наиболее точное его определение. Интернет – это совокупность компьютеров и серверов всего мира. Это сеть клиент-сервер, поскольку в ней существуют сервера, хранящие информацию, и вы можете получать информацию с других компьютеров. В Интернет объединены миллионы клиентов и миллионы серверов, а объем доступной информации даже трудно оценить.
Интернет представляет собой совокупность различных элементов, и Всемирная Паутина лишь часть Интернет. Интернет предлагает ряд инструментов, позволяющих вам получать информацию, которая вам необходима, с миллионов компьютеров, объединенных в сеть. Эти инструменты могут быть простыми или достаточно сложными, в их числе:
Всемирная Паутина: обычно называемая WWW (от World Wide Web).
WWW – это единое информационное пространство, состоящее из сотен миллионов взаимосвязанных электронных документов, хранящихся на Web-серверах. Отдельные документы, составляющие пространство Web, называют Web-страницами. Группы тематически объединенных Web-страниц называют Web-узлами (альтернативный термин – Web-сайт или просто сайт). Программы для просмотра Web-страниц называют браузерами.
Электронная почта: или e-mail, доступна во всей сети Интернет. Она дает возможность людям быстро пересылать файлы по всему миру. Это может быть просто текстовая заметка или может включать графику или какое-либо другое содержание.
Передача файлов: перемещает или копирует файлы с одного компьютера на другой. Существуют специфические руководящие принципы, или протоколы, которые управляют передачей данных по Интернет, известные как протокол передачи файлов (File Transfer Protocol, FTP).
Новости Usenet (Usenet News): сеть компьютеров, которые обмениваются статьями на определенные темы, обеспечивают поддержку программным продуктам или предлагают ответы на различные категории вопросов.
Новостные группы (newsgroups): сетевая конференция в USENET, организованная для ведения дискуссий и обмена новостями. Чтение и отправка сообщений осуществляются программой, запускающейся на компьютере пользователя и соединяющейся с сервером новостей.
Веб-браузер
Веб-сайты создаются с использованием языка программирования, называемого HTML (HyperText Markup Language). Вы просматриваете веб-страницы с помощью специальной программы, называемой веб-браузером (Web browser). Наиболее популярные веб-браузеры Internet Explorer (Microsoft.com), Netscape Navigator (Netscape.com), Opera (Opera.com), Mozilla (Mozilla.org), AOL (aol.com).
Браузер позволяет вам просматривать все типы информации, созданной в HTML, включая текст, графику, звук, анимацию, слайд-шоу, видео и многое другое. Как только вы поймете, как можно использовать веб-браузер, получение информации, которую вы хотите найти, будет ограничено лишь временем, которым вы располагаете для поиска этой информации.
Веб-браузер показывает вам отдельные веб-страницы с отдельных веб-сайтов. Веб-сайты организованы так, что связанная информация собрана вместе, сгруппирована в веб-страницы, что напоминает книгу или журнал на определенную тему. Например, у вашего университета есть веб-сайт, который включает множество страниц. Местная библиотека имеет другой веб-сайт, который состоит из других страниц.
Всегда существует главная страница веб-сайта, называемая домашней страницей (home page). Домашняя страница – это почти то же самое, что и обложка журнала или первая страница газеты. Обычно на ней выставляется привлекательная картинка, символизирующая идею данного сайта. Она может также включать в себя следующее: колонку содержания, карту сайта или навигационную панель, дающие вам представление о других страницах данного сайта.
Браузер позволяет просто перепрыгивать со страницы на страницу. Это обычно называют хождением по сети. Вы путешествуете по сети через окно браузера.
Когда вы открываете браузер и исследуете информацию на данной странице, вы можете просмотреть и другие страницы. Вы можете перемещаться между страницами различными способами.
Наиболее быстрый способ, с помощью которого вы можете попасть на новую страницу, способ, который делает Всемирную Паутину столь эффективной и удобной, это использование средства, которое называют гипертекстом (hypertext). Гипертекст – это способ связывания информации с различных страниц или даже с различных сайтов. Гипертекстовые ссылки на веб-странице чаще всего показаны как подчеркнутые слова, фразы или даже графика. Когда вы передвигаете указатель мыши по веб-странице, вы можете легко отличить даже те гиперссылки, которые не подчеркнуты, так как их заметит указатель мыши. Когда вы наводите указатель мыши на гиперссылку, его вид изменяется со стрелочки на ладонь с указательным пальцем. Если вы щелкнете по гипертекстовой ссылке, вы попадете на страницу, о которой говорилось в теме ссылки.
Другой способ, с помощью которого вы можете переместиться на другую страницу или посетить другой сайт во Всемирной Паутине – использование веб-адресов. Поскольку было бы трудно найти дом, если бы у него не было своего адреса, так и у любого веб-сайта есть свой уникальный адрес, чтобы его можно было найти. Этот адрес называется универсальный локатор ресурса (Uniform Resource Locator) или URL.
http://www. zdorovie.ru/gigiena/news.html
zdorovie.ru: Это название сервера, который хранит всю информацию. Оно называется доменным именем и включает имя, точку и суффикс или домен высшего уровня (top-level domain, TLD). Первая часть – это чаще всего название компании, а последняя часть может быть одним из следующих доменов высшего уровня (TLD):
.com: компании и большая часть общих сокращений;
.edu: образовательные институты и университеты США;
.gov: правительственные агентства в США;
.mil: военные сайты США;
.net: сети; чаще всего обозначают сайты Интернет-провайдеров;
.org: некоммерческие организации.
Помимо этих доменов высшего уровня существует множество новых, возникших за последние несколько лет, таких как: .info, .biz, и .pro, используются также двухзначные домены стран, например: .mx для Мексики, .pt для Португалии, .de для Германии, .fr для Франции, .ca для Канады, .uk для Великобритании, .ru для России, .kz для Казахстана.
Поисковая система (Search engine) – это веб-сайт, на котором вы можете найти интересующую вас информацию, используя набор ключевых слов. Существует много типов поисковых систем, но большинство из них имеют четыре компонента, позволяющих искать информацию, организовывать ее и делать доступной для пользователя:
"Паук" (Spider): автоматизированная программа, которая путешествует по Интернет, обнаруживая веб-сайты или определенные веб-страницы и добавляя их в базовый список. Также известна под названиями бот и веб-краулер, программа скрыта от пользователя.
Индексирующая программа (Index program): программа, которая структурирует и организует информацию, сохраненную для веб-сайта, таким образом, чтобы вы могли ее найти. Индексирующая программа скрыта от пользователя.
База данных поисковой системы (search engine database): совокупность всей информации, которая может быть вам доступна для поиска, всегда скрыта от пользователя.
Интерфейс (interface): окно, которое вы видите; это то окно, где вы вводите ключевые слова, по которым хотите найти что-либо в Интернет.
Когда вы захотите использовать поисковую систему, вы найдете большой список поисковых систем, доступных во Всемирной Паутине. Для того, чтобы вы могли решить, какую именно систему лучше всего использовать, вам необходимо понимать различия между ними. Существуют три основных типа поисковых систем:
Поисковая система по метаданным (Meta Search Engine): исследует огромное количество сайтов поисковых систем и комбинирует для вас полученные результаты. Примерами поисковых систем по метаданным являются:
Yahoo!: http://ru.yahoo.com
MSN Search: http://search.msn.com
Alta Vista: http://www.altavista.com
Универсальная поисковая система (General Purpose Search Engine): поисковая система, охватывающая широкий спектр информации, удобная для поиска неспециализированной информации. Примерами универсальных поисковых систем являются:
Google: http://www.google.ru
Yandex: http://www.yandex.ru
Rambler: http://www.rambler.ru
Поисковый агент (Search Agents/Bots): программные инструменты для сложных условий поиска. Примеры:
Bot Spot: http://bots.internet.com
Copernic: http://www.copernic.com
Большинство сайтов поисковых систем имеют основную страницу, на которой есть текстовое поле для ввода ключевых слов по теме, материалы которой вы хотите найти. Вы вводите слово или слова, которые являются ключевыми в вашем поиске. Например, вы можете ввести история географических открытий в основное текстовое поле. Поисковая система выдаст вам все сайты, содержащие эти слова. По поиску история географических открытий в Google, будет более чем 11800 сайтов.
Результат поиска значительно зависит от поисковой системы и того, какие слова вы вводите для поиска. Например, если вы будете искать история географических открытий в поисковой системе AltaVista, вы получите чуть менее 23000 сайтов.
Большинство поисковых систем предлагают вам файлы помощи, дающие подсказки по поиску в данной системе. Не бойтесь использовать файлы подсказки. Они могут предложить примеры наиболее удачных способов поиска информации во Всемирной Паутине.
Основы HTML-документа
Специальные программы для просмотра электронных документов, созданных по правилам языка разметки HTML, называются браузерами. Сегодня существует большое количество самых разнообразных браузеров, из которых наибольшей популярностью пользуются три программы: Internet Explorer, Netscape и Opera. Можно назвать несколько основных возможностей браузера, благодаря которым Internet Explorer получил такую популярность;
Среди недостатков можно выделить:
HTML-это язык, который позволяет создавать почти все многообразие эффектов, которые вы можете увидеть во «Всемирной паутине». Однако в некотором смысле HTML ограничен, и тогда он зовет на помощь такие языки, как Java и CGI, которые могут привнести на страницу эффекты и функции, которые находятся за пределами возможностей HTML. HTML означает «язык разметки гипертекста»-Hyper Text Markup Language. HTML-это программный язык, который требует от пользователя следовать определенным правилам и использовать вполне определенные операторы. Ограниченность набора операторов уменьшает возможности языка и требует применения дополнительных средств. HTML-документ — это просто текстовый файл с расширением *.htm.
Структура HTML-документа
<html>
<head>
--------
текст заголовка
---------
</head>
---------
текст документа
---------
</html>
Пример 1.
<html>
<head>
<title>
Пример 1
</title>
</head>
<body> Асанбаева Айнур Муратовна
</body>
</html>
Как видно из примера, вся информация о форматировании документа сосредоточена в его фрагментах, заключенных между знаками "<" и ">". Такой фрагмент (например, <html> ) называется меткой (по-английски — tag, читается "тэг"). Большинство HTML-меток — парные, то есть на каждую открывающую метку вида <tag> есть закрывающая метка вида </tag> с тем же именем, но с добавлением "/". Метки можно вводить как большими, так и маленькими буквами.
Раздел HTML определяет специфику документа, содержание которого будет интерпретироваться браузером. Раздел описывается тэгом контейнером <HTML>…</HTML> и дает браузеру информацию о том, что документ разработан с помощью языка разметки HTML.
Раздел HEAD выполняет функцию рабочего заголовка HTML-документа и является, по сути, «бойцом невидимого фронта». Тэги, указываемые внутри раздела, чрезвычайно важны и могут сильно влиять на внешний вид документа, но сами остаются незаметными глазу пользователя. Данному разделу сопоставлен парный тэг <HEAD>…</HEAD>.
Внутри раздела HEAD можно указывать следующие тэги HTML.
Парный тэг <TITLE>…</TITLE> предназначен для указания имени созданного электронного документа. Следует помнить, что под именем документа в данном случае имеется в виду не файловое наименование, а визуальный заголовок HTML-страницы.
Раздел BODY является одним из самых важных компонентов любого HTML-докуманта, т.к. в нем располагается содержательная часть, которая выводится браузером на экран монитора пользователя.
Раздел описывается парным тэгом <BODY>…</BODY>, внутри которого размещается большинство существующих тэгов HTML.
Форматирование текста
В большинстве случаев мы посещаем интернет-сайты в поисках именно текстовой информации: статей и художественных произведений, новостей и технической документации и т.п. И от того, как оформлен текст, как он преподнесен посетителю, зависит многое в судьбе любого Web-сайта.
Область работы с текстом в HTML включает в себя большое количество всевозможных тэгов, составляющих две основные группы: тэги логического и физического форматирования.
В группу тэгов логического форматирования входят тэги, отображающие на экране монитора элементы документа таким образом, как установлено по умолчанию в спецификации языка разметки HTML. Переопределить их параметры или свойства нельзя, за исключением использования стилевых шаблонов CSS и обособления тэгами физического форматирования. Результат действия разных тэгов логического форматирования визуально может совпадать, ибо основное их предназначение заключается в логическом акценте отдельных элементов HTML.
Тэги физического форматирования позволяют разработчику HTML-документа визуально изменять текст, варьируя его параметры и значения. Другими словами, тэги физического форматирования предназначены для выделения отдельных тестовых фрагментов различными способами, установленными автором документа.
Тэги логического форматирования
При использовании логических стилей автор документа не может знать заранее, что увидит на экране читатель. Разные браузеры толкуют одни и те же метки логических стилей по-разному. Некоторые браузеры игнорируют некоторые метки вообще и показывают нормальный текст вместо выделенного логическим стилем. Вот самые распространенные логические стили.
|
Атрибут |
Функция |
|
<EM> ... </EM> |
От английского emphasis — акцент. наклонный шрифт (аналог <i>...</i>) |
|
<STRONG> ... </STRONG> |
От английского strong emphasis — сильный акцент. жирный шрифт (аналог <b>...</b>) Использвается для демонстрации образцов сообщений, выводимых на экран программами. |
|
<CODE> ... </CODE> |
Рекомендуется использовать для фрагментов исходных текстов. Текст отображается как код или формула (чаще всего как шрифт Courier) |
|
<SAMP> ... </SAMP> |
От английского sample — образец. Рекомендуется использовать для демонстрации образцов сообщений, выводимых на экран программами. |
|
<KBD> ... </KBD> |
От английского keyboard — клавиатура. Рекомендуется использовать для указания того, что нужно ввести с клавиатуры. текст отображается моноширинным жирным шрифтом |
|
<VAR> ... </VAR> |
От английского variable — переменная. Рекомендуется использовать для написания имен переменных. |
|
<P> ... </P> |
Такая пара меток описывает абзац. Все, что заключено между <P> и </P> , воспринимается как один абзац. |
Метки <Hi> и <P> могут содержать дополнительный атрибут ALIGN (читается "элайн", от английского "выравнивать"), например:
<H1> ... </H1> — <H6> ... </H6>
Метки вида <Hi> (где i — цифра от 1 до 6) описывают заголовки шести различных уровней. Заголовок первого уровня — самый крупный, шестого уровня, естественно — самый мелкий.
|
Атрибут |
Функция |
|
<B> … </B> |
жирный шрифт |
|
<I> …</I> |
Курсивный шрифт (наклонный) |
|
<U> … </U> |
подчеркнутый шрифт |
|
<S> … </S> |
перечёркнутый шрифт |
|
<strike> … </strike> |
перечёркнутый шрифт (аналог <s></s>) |
|
<big> … </big> |
текст отображается больше, чем основной шрифт |
|
<small> … </small> |
текст отображается меньше, чем основной шрифт |
|
<TT> … </TT>. |
Текст, размещенный между этими метками, будет написан шрифтом, имитирующим пишущую машинку, то есть имеющим фиксированную ширину символа. |
|
<BLINK>…</BLINK>- |
поддерживается только браузером Netscape и реализует мигающий эффект выделенного фрагмента текста; |
|
<font size= “ ”>…</font> |
SIZE-его функцией является определение размера шрифта, которое происходит по условной шкале от1 до 7. Однако вид шрифта с учетом свойств его размеров может различаться в зависимости от модели и версии браузера. <FONT FACE= “Tahoma”, “Arial”, “Verdana” COLOR= “BLUE” SIZE=“2”>Этот текст будет показан одним из 3-х указанных шрифтов.</FONT> |
|
<font color= “ ”>...</font> |
Устанавливает цвет текста, используя значение цвета в виде RRGGBB. |
|
<font face= “ ”>...</font> |
FACE-посредством которого браузер отображает текст указанным в HTML-коде шрифтом. При этом значение параметра FACE должно соответствовать шрифту, установленному на компьютере пользователя. Если такого нет, текст будет показан стандартным шрифтом. <FONT FACE= “Tahoma”, “Arial”, “Verdana”>Этот текст будет показан одним из 3-х указанных шрифтов.</FONT> |
|
<SUP> … </SUP> |
размещает текстовый фрагмент относительно верхней линии строки. Также подходит для включения в разнообразные формулы. |
|
<SUВ>…</SUВ> |
позиционирует фрагмент текста относительно нижней линии строки. Весьма удобный инструмент для написания математических и химических формул. |
|
<OL> <LI>Иван; <LI>Данила; <LI>Игорь </OL> |
получится вот такой список:
|
Например, чтобы создать вот такой список:
|
необходим вот такой HTML-текст: <UL> <LI>Иван; <LI>Данила; <LI>Игорь </UL> |
|
Обратите внимание: у метки <LI> нет парной закрывающей метки.
Тэг <OL> может иметь следующие параметры:
|
Атрибут |
Функция |
|
TYPE = “ ”: |
|
|
A - |
большие латинские буквы (А, В, С, D, ...) |
|
a - |
маленькие латинские буквы (а, b, с, d, ...) |
|
I - |
большие римские цифры (І, ІІ, ІІІ, ІV,…) |
|
i - |
маленькие римские цифры (і, іі, ііі, іv, ...) |
|
1 - |
обычные цифры (1, 2, 3, 4,...) |
START - устанавливает число, с которого будет начинается отсчет.
Следующий пример отображает список, пронумерованный большими латинскими буквами и начинающийся с восьмой цифры:
|
<OL TYPE="I" START="8"> |
|
Параметры тэга <UL>
Тэг маркированного списка: <UL> может содержать два основных параметра: TYPE и COMPACT. Параметр TYPE отвечает за форму отображаемого браузером маркера. Существуют три возможных значения данного параметра:
|
Атрибут |
Функция |
|
<UL TYPE=disc><LI> disc </UL> |
|
|
<UL TYPE=circle><LI> circle </UL> |
|
|
<UL TYPE=square><LI> square </UL> |
|
Списки определений.
Списки определений - это особый тип структуризации информационных данных. Идеально подходящий для отображения терминологических и толковых словарей, а также справочников средствами HTML. В отличие от нумерованных и маркированных списков, которые могут содержать не только по несколько элементов, но и другие списки, список определений состоит всего из двух частей: самого определения (термина) и его содержательной части (описания). Структура списка определений описывается тэгом-контейнером <DL>(Definition List), внутри которого указывается тэг <DT>(Definition Term), выделяющий заголовок определения, и тэг <DD> (Definition Description), описывающий содержательную часть определения. Для двух последних тэгов наличие закрывающих тэгов необязательно.
Списки определений имеют следующий вид:
|
<DL> |
Термин Определение термина Определение термина Определение термина Определение термина |
С элементом DL можно использовать атрибут COMPACT для установки более компактного размещения пунктов списка. <DL COMPACT> Именно так используется данный атрибут - никакие числовые значения ему не присваиваются.
Пример 2.
<html>
<head>
<title>
Пример
</title>
</head>
<body bgcolor="#FFFFFF" TEXT="black" LINK="#00FF00" ALINK="#00FF00" VLINK="blue">
<OL TYPE="1">
<Font size="5"> <b>Модуль Информатика</b></Font>
<li>Информатика
<li>Электронное правительство
<li>Основы языка Delphi
</ol>
<OL TYPE="I">
<Font size="5"> <b>Модуль психиатрия </b></Font>
<li>Наркология
<li>Психология
<li>Психиатрия
</ol>
<OL TYPE="A">
<Font size="5"> <b>Модуль философия </b></Font>
<li>Философия
<li>Социология
<li>Основы права
</ol>
Цветовая гамма HTML-документа определяется атрибутами, размещенными внутри метки <BODY> . Вот список этих атрибутов:
|
Атрибут |
Функция |
|
bgcolor |
Определяет цвет фона документа. |
|
text |
Определяет цвет текста документа. |
Кроме того, метка <BODY> может включать атрибут background="[имя файла]" , который задает изображение, служащее фоном для текста и других изображений. Как и любое другое изображение, фон должен быть представлен в формате GIF (файл с расширением *.gif ) или JPEG (файл с расширением *.jpg или *.jpeg ).
Браузеры заполняют множественными копиями изображения-фона все пространство окна, в котором открыт документ, подобно тому, как при строительстве большие пространства стен покрывают маленькими (и одинаковыми) плитками.
Важно отметить, что цвет фона и изображение-фон никак не отображаются на бумаге при выводе HTML-документа на печать. Из этого есть одно важное практическое следствие: старайтесь не использовать текст белого цвета .
|
Имя |
код |
Имя |
Код |
|
Blaсk (черный) |
“#000000” |
Green (зеленый) |
“#008000” |
|
Silver (серебристый) |
“#C0C0C0” |
Lime (лимонный) |
“#00FF00” |
|
Gray (серый) |
“#808080” |
Olive (оливковый) |
“#808000” |
|
White(белый) |
“#FFFFFF” |
Yellow (желтый) |
“#FFFF00” |
|
Maroon (бордовый) |
“#800000” |
Navy (тёмно-синий) |
“#000080” |
|
Red (красный) |
“#FF0000” |
Blue (голубой) |
“#0000FF” |
|
Purple (фиолетовый) |
“#800080” |
Teal (темно-зелёный) |
“#008080” |
|
Fuchsia(фукцированный красный) |
“#FF00FF” |
Aqua (бело-голубой ) |
“#00FFFF” |
Как интересный журнал или проспект теряет в своей привлекательности без цветных иллюстраций, так любой HTML-документ кажется сухим и невзрачным без использования графики. Значение графических изображений в аспекте создания электронных документов нельзя переоценить: реклама и коммерческие предложения компаний и юридических лиц становятся более выразительными и яркими, иллюстрации и схемы способны превратить скучный перечень услуг или расценок в интересный информативный материал, любой художественный рассказ или произведение будет восприниматься легче и естественнее при наличии картинок или фотографий.
Встроить изображение в HTML-документ очень просто. Для этого нужно только иметь это самое изображение в формате GIF (файл с расширением *.gif ) или JPEG (файл с расширением *.jpg или *.jpeg ) и одну строчку в HTML-тексте.
Допустим, нам нужно включить в документ изображение, записанное в файл picture.gif находящийся в одном каталоге с HTML-документом. Тогда строчка будет вот такая:
<IMG SRC="имя файла"> Здесь слово IMG (Image) означает изображение, а параметр
SRC (Source)-источник.
<IMG SRC="picture.gif">
В качестве источника необходимо указать имя файла с изображением. Разумеется, если файл находится в другой, нежели страница, директории, то надо указать его местоположение. Изображение будет размещено в том месте на странице, где находится ярлык.Метка <IMG SRC="[имя файла]"> может также включать атрибут ALT="[текст]" , например: <img src="C:\Documents and Settings\All Users\Документы\Мои рисунки\Образцы рисунков\Закат.jpg" ALT="Картинка">
Встретив такую метку, браузер покажет на экране текст Картинка и начнет загружать на его место картинку из файла picture.gif . Атрибут ALT может оказаться необходимым для старых браузеров, которые не поддерживают изображений, а также на случай, если у браузера отключена автоматическая загрузка изображений (при медленном подключении к Интернет это делается для экономии времени).
Файл, содержащий изображение, может находиться в другом каталоге или даже на другом сервере. В этом случае стоит указать его полное имя .
Параметры HSPACE и VSPACE- определяет размер горизонтального и вертикального отступов от встраиваемого изображения до текста. Формат записи значений-в пикселях. По умолчанию, значения обоих типов отступа равно нулю.
Параметры тэга <IMG> может включать следующие атрибуты:
|
Атрибут |
Функция |
|
SRC= “файл” |
Указание пути к встраиваемому изображению |
|
BORDER= “n” |
Указание рамки рисунка |
|
WIDTH=n(%) |
Определение ширины изображения |
|
HEIGHT=n(%) |
Определение высоты изображения |
|
ALIGN |
Указание типа выравнивания рисунка |
|
HSPACE=n |
Определение горизонтального отступа между рисунком и текстом |
|
VSPACE=n |
Определение вертикального отступа между рисунком и текстом |
|
ALT |
Указание альтернативного текста |
|
TITLE |
Создание информационной подсказки к изображению |
Пример 3.
|
<html> <title> Пример </title> <body bgcolor="Red"><h1><font color="green"> Электронные услуги в здравоохранении.</h1> <font color="red"> <img src="C:\Documents and Settings\All Users\Документы\Мои рисунки\Образцы рисунков\Закат.jpg" align="left" border="1" width=50% ><нspace="20" vspace="20"><b>Базовые услуги Электронного правительства в соответствие с основными сферами жизнедеятельности граждан. </b></br></BODY></html> |
Теперь о фоновой картинке. Фоном может быть как большой графический файл (учтите - в этом случае страничка будет грузиться дольше) так и его фрагмент, что более разумно. При использовании последнего он будет автоматически размножен Вашим Обозревателем, поэтому подбирайте фрагмент хорошо стыкующимся. Вставить в страницу фоновую картинку можно так: <BODY BACKGROUND="images.gif"> Параметру BACKGROUND присвоено значение images.gif - это имя графического файла с расширением (поддерживаются *.jpg, *.gif, *.png). Естественно оно может быть другим. Предпологается, что графический файл расположен в одной папке с Вашим документом, иначе нужно указать к нему путь.
Одним из наиболее мощных и гибких средств представления информационных данных в HTML по праву являются таблицы. В HTML таблицы являются не только удобным средством структурирования информации. Сегодня таблица становиться основой большинство электронных документов, структура которых может включать самые разнообразные элементы HTML.
Таблица начинается с метки <TABLE> и заканчивается меткой </TABLE>. Любая таблица состоит из ряда (тэг-контейнер <TR>…</TR>, Table Row), содержащего определенное количество ячеек (тэг-контейнер <TD>…<TD>, Table Data). Тэг <TD> предназначен для указания данных в таблице, а для размещения заголовков в ячейке используется тэг <TH>…</TH> (Table Header).
Метка <TABLE> может включать несколько атрибутов:
|
Атрибут |
Функция |
|
ALIGN |
Устанавливает расположение таблицы по отношению к полям документа. Допустимые значения: ALIGN=LEFT (выравнивание влево), ALIGN=CENTER (выравнивание по центру), ALIGN=RIGHT (выравнивание вправо). |
|
WIDTH |
Ширина таблицы. Ее можно задать в пикселях (например, WIDTH= “400”) или в процентах от ширины страницы (например, WIDTH= “80%” ). |
|
BORDER |
Устанавливает ширину внешней рамки таблицы и ячеек в пикселях (например, BORDER= “4”). Если атрибут не установлен, таблица показывается без рамки. |
|
CELLSPACING |
Устанавливает расстояние между рамками ячеек таблицы в пикселях (например, CELLSPACING= “2”). |
|
CELLPADDING |
Устанавливает расстояние между рамкой ячейки и текстом в пикселях (например, CELLPADDING= “10”). |
Таблица может иметь заголовок (<CAPTION> ... </CAPTION>), хотя заголовок не является обязательным. Метка <CAPTION> может включать атрибут ALIGN. Допустимые значения: <CAPTION ALIGN=TOP> (заголовок помещается над таблицей) и <CAPTION ALIGN=BOTTOM> (заголовок помещается под таблицей).
Каждая строка таблицы начинается с метки <TR> и заканчивается меткой </TR>. Метка <TR> может включать следующие атрибуты:
|
Атрибут |
Функция |
|
ALIGN |
Устанавливает выравнивание текста в ячейках строки. Допустимые значения: ALIGN=LEFT (выравнивание влево), ALIGN=CENTER (выравнивание по центру), ALIGN=RIGHT (выравнивание вправо). |
|
VALIGN |
Устанавливает вертикальное выравнивание текста в ячейках строки. Допустимые значения: VALIGN=TOP (выравнивание по верхнему краю), VALIGN=CENTER (выравнивание по центру), VALIGN=BOTTOM (выравнивание по нижнему краю). |
Каждая ячейка таблицы начинается с метки <TD> и заканчивается меткой </TD>. Метка <TD> может включать следующие атрибуты:
|
Атрибут |
Функция |
|
NOWRAP |
Присутствие этого атрибута означает, что содержимое ячейки должно быть показано в одну строку. |
|
COLSPAN |
Устанавливает "размах" ячейки по горизонтали. Например, COLSPAN= “3” означает, что ячейка простирается на три колонки. |
|
ROWSPAN |
Устанавливает "размах" ячейки по вертикали. Например, ROWSPAN= “2” означает, что ячейка занимает две строки. |
|
WIDTH |
Устанавливает ширину ячейки в пикселях (например, WIDTH= “200”). |
|
HEIGHT |
Устанавливает высоту ячейки в пикселях (например, HEIGHT= “40”). |
|
BORDERCOLOR="#FFFFFF" |
Определяет цвет рамки #FFFFFF-белый цвет |
|
BACKGROUND="image.gif" |
Фоновая картинка таблицы. |
Пример 4.
<HTML>
<HEAD>
<TITLE>Пример
</TITLE>
</HEAD>
<body bgcolor="#FFFFFF" Text="black" Link="#00FF00" Alink="#00FF00" Vlink="blue" Lftmargin="40" Rightmargin="40" Marginwidth="40">
<table align="center" border="3" cellspacing="0" cellpadding="5" width="80%" Height="150">
<tr Align="center" bgcolor="#CECECE">
<th Colspan="2"> <i><b><h1>Казахский Национальный Медицинский Университет
им. С.Д. Асфендиярова</h1></i></b></th>
</tr>
<tr>
<td align="center" rowspan="5"><i><b><h1>Факультеты </h1></i></b></td>
<td align="center">лечебный</td>
</tr>
<tr>
<td align="center">педиатрический </td>
</tr>
<tr>
<td align="center"> медико-профилактическое дело</td>
</tr>
<tr>
<td align="center">стоматологический</td>
</tr>
<tr>
<td align="center">фармацевтический</td>
</tr>
</table></ body></html
Перерыв - 10 мин
Методы обучения и преподавания: информационные технологии обучения.
Методы контроля формируемых на занятии компетенций:
Самостоятельная работа студентов - 50 мин
Освоение практических навыков: Решение типовых и ситуационных задач.
Литература:
предпринимателей и банкиров.-М.,2001.
Учебник для ВУЗов 2001, 640 с.
Перерыв - 10 мин
Совместная работа студента с преподавателем - 25 мин
После выполнения практической части работы, преподаватель проверяет правильность и последовательность действий студентов, достигли они конечного результата. Затем преподаватель проводит опрос студентов с анализом темы. Выясняет практическое его применение.
Контроль заключительного уровня знании - 20 мин
Преподаватель проводит анализ результатов практической работы студентов, выясняет осознанно ли выполнили работу. Затем студенты сдают тесты для контроля знаний.
Контроль
Вопросы:
Тесты: См. Сборник тестовых заданий по «Информатике», тема «Основы языка HTML»
Общая оценка знаний - 5 мин
Преподаватель анализирует компетенций: знаний, коммуникативные навыки по данной теме, проводит разбор общих ошибок допущенных студентами при выполнении заданий. Затем преподаватель анализирует достижения и недостатки студента с выставлением итоговой оценки в журнал по трем параметрам (за знания, коммуникативные навыки).
Стр. 17 из 17