[ Монахов ] Система World Wide Web для физиков
.htmlВ.В.Монахов. Система World Wide Web для физиков Система World Wide Web для физиков В.В.Монахов (C)1996-2007 В.В.Монахов E-mail: v.v.monahov@mail.ru ,
URL: http://barsic.spbu.ru/index_r.html
URL данного документа: http://barsic.spbu.ru/www/computer/vm_www2007.html, 1. Система World Wide Web Глобальная (всемирная) компьютерная сеть Internet сделала возможным свободный обмен информацией по всему миру в реальном режиме времени. Однако сначала ресурсы Internet были доступны лишь при помощи програмного обеспечения, ориентированного на пересылку простого текста (так называемого 'плоского текста'). Поэтому физики Tim Bernes-Lee и Robert Cailliau из Женевского центра ядерных исследований ЦЕРН (CERN) решили разработать систему, позволяющую ученым-физикам обмениваться результатами своих научных иследований через Internet в виде привычного для научных работников отформатированного и иллюстрированного текста, включающего ссылки на другие публикации.
Так было положено начало созданию World Wide Web, Всемирной Информационной Паутине, которая охватывает к настоящему времени практически весь мир.
World Wide Web, или как ее обычно называют, WWW - это распределенная компьютерная система, основанная на гипертексте. Информация в ней хранится на компьютерах с соответствующим программным обеспечением (серверах), объединеных в глобальную сеть. Она включает в себя не только текст, но и возможность выполнения определенных действий при выборе специально отмеченных участков текста (так называемый гипертекст), а также графику, видео, звук (т. н. средства мультимедиа). Эта информация содержится в виде HTML-документов, которые могут содержать ссылки на другие документы, хранящиеся как на том же самом, так и на другом сервере. На экране компьютера гиперссылки выглядят как выделенные другим цветом и/или подчеркиванием участки текста или рисунки (графические изображения).
Используя гиперссылки, называемые также гипертекстовыми связями, пользователь может автоматически связаться с соответствующим источником инфомации в сети и получить на экране своего компьютера документ, на который была сделана ссылка. В большинстве случаев выбор гиперсвязей производится при помощи щелчка клавишей мыши на участке текста с гиперсвязью. При этом компьютер посылает через сеть по протоколу http запрос серверу, хранящему файл с необходимым документом. Сервер, получив запрос, посылает клиенту этот файл или сообщение об отказе, если требуемый документ по тем или иным причинам недоступен.
Просмотр HTML-документов осуществляется с помощью браузера (browser) - программы просмотра WWW-документов. В настоящее время получили распространение десятки таких программ, но наиболее известными и развитыми являются Microsoft Internet Explorer, Mozilla и его клоны, Opera, а также уже сошедший со сцены Netscape Navigator. Более подробную информацию можно посмотреть по адресу http://barsic.spbu.ru/www/comlan/browsers_r.html.
Как уже отмечалось, WWW была создана в одном из ведущих научно-исследовательских учреждений, ЦЕРНе, именно с целью распространения научной информации. В настоящее время практически все журнальные научные публикации можно найти в WWW. Уже сейчас многие журналы издаются как в печатном, так и в электронном виде,преимущественно - в виде .pdf-файлов. Правда, доступ к электронным версиям открыт только: Для компьютеров из организаций,выписывающих печатную версию данного журнала либо оплативших доступ к электронной версии данного издания Для компьютеров, имеющих "законные" IP-адреса.Такие адреса иногда называют анонсированными, чтобы подчеркнуть, что они анонсированы в Internet.( Компьютеры могут обладать IP-адресами "для местного использования", не предоставленными организации внешним провайдером. Такие адреса называют неанонсированными.) Гипертекстовый характер WWW с возможностью немедленного доступа к документам по гиперссылкам как нельзя лучше соответствует характеру научной информации. Практически каждый университет в мире имеет свой WWW-сервер. Возможности гипертекста и мультимедиа делают WWW весьма благодатной средой для создания распределенных обучающих систем (Distributed Teaching Applications). Наследник языка HTML, постепенно сменяющий его язык XML, стал стандартом для создания его подмножеств. Из них для научных работников наиболее важен язык MathML, предназначенный для представления формул. Разработчики ведущих математических сред (Maple, Mathematica,MatLab и др.) либо уже встроили сохранение формул в виде документов MathML,либо собираются это сделать в ближайшем будущем.
Любой WWW-сервер позволяет иметь свою домашнюю страничку (hompage) пользователю, зарегистрированному на нём. Достаточно знать сетевой адрес (URL) этой 'домашней странички', чтобы перейти к ней и увидеть её содержимое. Обычно такая информация содержит домашний и рабочий адрес и телефон владельца, данные о его научной работе , сведения о его научных интересах, список публикаций.
WWW-документ, как уже отмечалось, содержит форматированный текст, графику и гиперсвязи с использованием различных ресурсов Internet. Чтобы реализовать все эти возможности, был разработан специальный компьютерный язык - HyperText Markup Language (HTML) - язык разметки гипертекста. Задание 1
Кнопка 'Назад' (Back) позволяет вернуться на прежние страницы. Зайдите на сайты, возвращаясь с них в данный документ: страницу СПбГУ, страницу физического факультета СПбГУ, страницу НИИ физики СПбГУ, страницу автора данного текста, 2. Ресурсы WWW, полезные научному работнику Онлайн-переводчики, словари Онлайн переводчики являются полезным подспорьем - они всегда под рукой независимо от того, в каком месте мира Вы находитесь.Однако качество перевода у электронных переводчиков часто бывает крайне низкое, и для того, чтобы быть уверенным в правильности используемых терминов в Вашей предметной области следует поискать соответствующую литературу в WWW - см. раздел про поисковые системы. Но для начала достаточно поэкспериментировать со знакомыми Вам терминами. Задание 2
Зайдите на сайты и попробуйте перевести какое-либо словосочетание из предметной области Вашей кафедры. Например, 'Самосопряжённый оператор' или 'плохо обусловленная система уравнений': Мультитран - словарь - мультиязычный переводчик по фразе с автоматическим распознаванием научных и прочих словосочетаний ЛИНГВО - словарь - мультиязычный переводчик по фразе с автоматическим распознаванием научных и прочих словосочетаний - ABBYY Lingvo онлайн ПРОМТ - словари (общая лексика) русско -англ.,франц.,нем. и наоборот ПРОМТ - переводчики (общая лексика) англ. Сравните качество переводов Мультитран, ЛИНГВО и ПРОМТ (для словаря с общей лексикой). Например, правильным переводом словосочетания 'самосопряжённый оператор' является self-adjoint operator, а 'плохо обусловленная матрица' ill-conditioned matrix.
В ПРОМТ обратите внимание на направление перевода - Англо-русский или Русско-английский - при неправильном направлении перевод осуществляться не будет.
Попробуйте совершить ошибку в каком-либо из слов и посмотрите на реакцию переводчиков.
Попробуйте совершить ошибку в переключении клавиатуры на русский язык с английского при наборе слов (слово 'оператор' будет выглядеть как 'jgthfnjh') - и посмотрите на реакцию переводчиков. Обратите внимание на гиперссылку после слова "возможно" в информации об ошибке. Электронные версии журналов Многие научные журналы предоставляют в WWW открытый доступ к оглавлениям номеров журналов и рефератам (аннотациям) имеющихся в них статей. В некоторых случаях открывается доступ к самим статьям, преимущественно - в формате PDF-файлов (доступны для просмотра в свободно распространяемой программе Adobe Acrobat) Задание 3
Зайдите на сайт http://barsic.spbu.ru/www/journals_r.html, где дано большое число ссылок на онлайн-версии научных журналов, и попробуйте найти электронные версии журналов по Вашей научной тематике. Запишите в файле ссылки на нужные журналы - они понадобятся Вам для оформления макета Вашей домашней страницы. Поисковые системы Поисковые системы позволяют быстро находить нужную информацию.Поиск может осуществляться простым перечислением через пробел ключевых слов.
Основная проблема такого поиска - информационный шум. Если Вы ввели часто встречающиеся слова, система выдаст вам тысячи ссылок на страницы. Попытка ввести уточняющие слова приведёт к уменьшению числа выдаваемых страниц. Однако во многих случаях поисковые системы, не найдя нужного словосочетания или всех ключевых слов, начинают выдавать все страницы, на которых встречались хоть какие-нибудь из перечисленных слов, и количество выданных страниц возрастает до сотен и тысяч.
Поэтому работа в поисковых системах - особый род искусства. Кроме того, поисковые системы неравнозначны. Если Вы не нашли информацию в одной системе - это не значит, что вы не сможете найти её в другой! Некоторые системы (например, Апорт)умеют склонять слова и искать словосочетания. Поэтому они выдают гораздо меньше информационного шума при поиске по фразе. Другие (например, Google) - умеют искать нужную информацию внутри выложенных в WWW файлов в PDF-формате, что важно для поиска научных публикаций. Некоторые системы хорошо ищут по русскоязычным сайтам, некоторые - по англоязычным.
Однако поисковые системы постоянно совершенствуются, конкурируя друг с другом. Поэтому однозначно назвать лучшую нельзя. Во многом это дело личных пристрастий. Некоторые известные русскоязычные поисковые системы Google- русская страница. Ведёт поиск и внутри PDF-файлов. Яндекс Апорт - лучший поиск по фразе Рамблер Рубрикон - энциклопедии и словари онлайн Некоторые известные англоязычные поисковые системы SPIN Web (англ.) - поиск статей по физике (если доступ к найденной статье платный - попытайтесь по авторам и названию найти ее в свободном доступе или непосредственно на сайте указанного журнала - см. задание 3) Yahoo! (англ.) - лучшая поисковая система общего назначения Google - научный поиск. Ведёт поиск и внутри PDF-файлов. Alta Vista (англ.) - научный поиск Exite (англ.) Lycos (англ.) Webcrawler (англ.) Задание 4
Попробуйте с помощью поисковых систем найти Страницу Adobe Acrobat (не пытайтесь загружать сам пакет - он занимает десятки мегабайт!) Несколько публикаций по интересующей Вас кафедре или научной тематике. Запишите в файле ссылки на них - они понадобятся Вам для оформления макета Вашей домашней страницы. 3. Язык HTML.Кодирование специальных символов. Теги и атрибуты тегов Существует несколько версий языка HTML. Самая современная на данный момент версия - HTML 4.01, принятая в виде рекомендации консорциума W3C (World Wide Web Consortium), отвечающего за развитие языка HTML и других WWW-технологий. XML-версия языка HTML, называемая XHTML, пока не нашла широкого распространения. Наиболее употребляемая при создании простых WWW-документов версия - HTML 3.2. Существует большое количество сред, позволяющих интерактивно создавать HTML-документы. Тем не менее, даже в этом случае полезно знать основные принципы устройства HTML-документов и имеющиеся в этом языке средства разметки.
Документ, написанный на языке HTML, представляет собой текстовый файл, содержащий собственно текст,несущий информацию пользователю, и теги разметки (murkup tags). Теги представляют собой определенные последовательности символов, заключенные между знаками '<' и '>'.
Программа просмотра располагает текст на экране дисплея согласно задаваемой тегами разметке, а также включает в него рисунки, хранящиеся в отдельных графических файлах, и формирует гиперсвязи с другими документами или ресурсами Internet. После тега через пробел, вплоть до закрывающего символа '>', может следовать один или несколько параметров.
Файл на языке HTML имеет расширения .html или .htm. Он приобретает облик WWW-документа только тогда, когда просматривается в специальной программе просмотра - браузере.
Текст в HTML может включать любую последовательность символов, за исключением следующих:
< > & " Вместо них должны присутствовать комбинации < > & " Символы табуляции и перехода на новую строку считаются эквивалентными пробелу, а несколько этих символов и пробелов подряд (в любой комбинации) одному пробелу. Для вставки в текст значимого пробела используется комбинация Математические символы Аналогичным образом кодируются математические символы, хотя слабые браузеры могут показывать только часть из них: ∂∂ ∏ ∏ ∑ ∑ √ √ ∞ ∞ ∩ ∩ ∫ ∫ ± ± ≡ ≡ ≈ ≈ ≠ ≠ < < > > ≤ ≤ ≥ ≥ ≠ ≠ ˆ ˆ ˜ ˜ Ø Ø ø ø ÷ ÷ Специальные символы ° ° • • … … ′ ′ ″ ″ ‾ ‾ ™ ™ © © ® ® ♦ ♦ ◊ ◊ — — – – ’ ’ † † ‡ ‡ « « » » Греческие буквы - коды символов ΑΑ ΒΒ ΓΓ ΔΔ ΕΕ ΖΖ ΗΗ ΘΘ ΙΙ ΚΚ ΛΛ ΜΜ ΝΝ ΞΞ ΟΟ ΠΠ ΡΡ ΣΣ ΤΤ ΥΥ ΦΦ ΧΧ ΨΨ ΩΩ αα ββ γγ δδ εε ζζ ηη θθ ιι κκ λλ μμ νν ξξ οο ππ ρρ ςς σσ ττ υυ φφ χχ ψψ ωω Греческие буквы - названия букв Существует еще один вариант задания греческих букв - через сочетания &имяБуквы; Например,
α это α
β это β
γ это γ и т.д. Заглавные греческие буквы получаются так:
Α это Α
Β это Β
Γ это Γ и т.д. Α Α Β Β Γ Γ Δ Δ ΕΕ ΖΖ ΗΗ ΘΘ ΙΙ ΚΚ ΛΛ ΜΜ ΝΝ ΞΞ ΟΟ ΠΠ ΡΡ ΣΣ ΤΤ ΥΥ ΦΦ ΧΧ ΨΨ ΩΩ α α β β γ γ δ δ εε ζζ ηη θθ ιι κκ λλ μμ νν ξξ οο ππ ρρ σσ ττ υυ φφ χχ ψψ ωω Теги предназначены для форматирования и разметки документа. Теги бывают парные ("контейнеры") и непарные. Действие парного тега начинается с открывающего тега и заканчивается при встрече соответствующего ему закрывающего, признаком которого является символ " / ". Например: <html> это html документ </html> Непарный тег вызывает единичное действие в том месте, где он встречается. Например,тег <br> вызывает перевод текста на новую строку.
Исключением из правила, гласящего об эквивалентности любого числа пробелов, табуляций и переходов на новую строку одному пробелу, является текст внутри контейнера <pre> </pre>. Этот текст показывается так же, как он был предварительно отформатирован в обычном текстовом редакторе с использованием моноширинного шрифта, и все пробелы и переносы на новую строку являются значимыми. Однако внутри данного контейнера могут действовать другие теги разметки.
Внутри тега кроме его имени могут находиться атрибуты, задающие дополнительные параметры, необходимые для действия тега. Например, тег <img src="MyFile.gif" width=100 height=40> обеспечивает показ в данном месте текста изображения из файла с именем MyFile.gif, а ширина и высота изображения задаётся 100 на 40 точек (пикселей), соответственно. При этом атрибут src, задающий имя файла, является обязательным, а width и height - необязательные (могут отсутствовать). 4. Заголовок и тело документа Типичный HTML-документ имеет заголовок и тело. Начало документа отмечается тегом <html> и заканчивается тегом </html>
Заголовок документа:
<head>текст, включающий служебную информацию о документе</head>
Он никак не отображается на экране компьютера при просмотре HTML- файла, за исключением названия документа, заключенного в контейнере
<title>текст заголовка</title> ,
помещаемого между тегами заголовка. Это название обычно выводится как заголовок оконной формы, в которой происходит показ файла.
Важнейшей служебной информацией является кодировка документа, задаваемая следующим образом: <meta http-equiv="content-type" content="text/html; charset=windows-1251"> Тело документа определяет видимую часть документа: <body> это html-документ, содержащий какой-то текст. </body> На дисплее:
это html-документ, содержащий какой-то текст. Задание 5 Просмотрите в браузере данный HTML-документ. Попробуйте изменить размер окна браузера и выясните, как ведёт себя текст. Выберете в меню браузера пункт 'Вид/Размер шрифта'. Попробуйте изменить размер шрифта и выясните, как ведёт себя текст. Выберете в меню браузера пункт 'Вид/Размер шрифта' (View/Text Size,View/Text Zoom, View/Increase Font - Decrease Font и т.п. в англоязычных браузерах). Просмотрите содержимое данного HTML-документа при различных размерах шрифта. В любом редакторе плоского текста (например,Notepad) создайте простейший документ, содержащий текст с символами < , >, & , ", а также простейшими математическими формулами . Просмотрите созданный документ. Замените запрещённые к использованию символы на соответствующие сочетания и вновь просмотрите документ. Имейте в виду, что мощные браузеры стараются правильно показать даже неправильные документы, но на это не следует полагаться! 5. Теги, форматирующие текст 5.1 Параграф
Осуществляет показ одной пустой строки и "переводом каретки" перед началом заключенного в контейнере текста. Внутри параграфа возможно выравнивание: <p>без выравния текста</p> <p align=left>выравнивание текста по левому краю</p> <p align=right>выравнивание текста по правому краю</p> <p align=center>выравнивание текста по центру</p> Соответствующий текст в браузере выглядит так: без выравния текста
выравнивание текста по левому краю
выравнивание текста по правому краю
выравнивание текста по центру
Замечание: закрывающий тег </p> необязателен.
5.2 Перевод на новую строку
<br> - текст за этим тегом начинается с новой строки. Пример: В HTML-файле: СПбГУ<br>Физический факультет<br>Кафедра вычислительной физики<br> На дисплее: СПбГУ
Физический факультет
Кафедра вычислительной физики
Замечание : этот тег не рекомендуется использовать в случаях, когда надо обеспечить отделение одной строки от другой одной или несколькими пустыми строками. Лучше использовать для этих целей тег параграфа.
У тега <br> имеется необязательный атрибут CLEAR для работы с рядом стоящими изображениями(тег IMG). Возможные значения атрибута - LEFT, RIGHT, ALL, NONE. При этом происходит удаление со строки последнего изображения с соответствующей стороны. Примеры: <BR CLEAR=LEFT> , <BRCLEAR=RIGHT> , <BR CLEAR=ALL>. <BR CLEAR=NONE> эквивалентно <BR>. 5.3 Горизонтальная раздельная черта
<hr> Выглядит как Возможные атрибуты align=... size=... width=... 5.4 Заголовки
Используются для выводов заголовков и подзаголовков (всего 6 уровней). Значение уровня заголовка может от 1 до 6. <h1>Заголовок первого уровня</h1> <h2>Заголовок второго уровня</h2> <h3>Заголовок третьего уровня</h3> <h4>Заголовок четвёртого уровня</h4> <h5>Заголовок пятого уровня</h5> <h6>Заголовок шестого уровня</h6> Заголовок первого уровня Заголовок второго уровня Заголовок третьего уровня Заголовок четвёртого уровня Заголовок пятого уровня Заголовок шестого уровня
<h1 align=left>...</h1> - выравнивае по левому краю
<h1 align=right>...</h1> - по правому
<h1 align=center>...</h1> - по центру
5.5 Пронумерованный список Задается в виде: <ol> <li>... <li>... <li>... ... </ol> В HTML-файле: Курсовые в срок сдали следующие студенты: <ol> <li>Иванов <li>Петров <li>Сидоров </ol> На дисплее: Курсовые в срок сдали следующие студенты: Иванов Петров Сидоров
5.6 Ненумерованный список
В HTML-файле задается в схожем с нумерованным списком виде : Курсовые в срок сдали следующие студенты: <ul> <li>Иванов <li>Петров <li>Сидоров </ul> На дисплее:
Курсовые в срок сдали следующие студенты: Иванов Петров Сидоров
5.7 Вложенные списки
Один ненумерованный или пронумерованный список можно включать в любое место другого - получится вложенный список. Пример: В HTML-файле: По конструктивному исполнению резисторы делятся на <ol> <li>Линейные <ul> <li>постоянного сопротивления <li>переменного сопротивления </ul> <li>Нелинейные </ol> На дисплее:
По конструктивному исполнению резисторы делятся на Линейные постоянного сопротивления переменного сопротивления Нелинейные
5.7 Глоссарий (список терминов) Задается в виде: <dl> <dt>термин1 <dd>разъяснение термина1 <dt>термин2 <dd>разъяснение термина2 ... </dl> В HTML-файле: <dl> <dt>p-n переход <dd>Электрический переход между областями полупроводника с электропроводностью p- и n- типа. <dt>Гетеропереход <dd>Электрический переход между двумя полупроводниками с различной шириной запрещенной зоны. </dl> На дисплее: p-n переход Электрический переход между областями полупроводника с электропроводностью p- и n- типа. Гетеропереход Электрический переход между двумя полупроводниками с различной шириной запрещенной зоны.
5.8 Физические стили текста
В HTML существуют следующие основные стили текста: <b>Жирный текст (bold)</b>
Жирный текст (bold) <i>Наклонный текст (italics)</i>
Наклонный текст (italics) <big>Большой размер шрифта</big>
Большой размер шрифта <small>Маленький размер шрифта</small>
Маленький размер шрифта Нижние индексы<sub>(subscript)</sub>
Нижние индексы(subscript) Верхние индексы<sup>(superscript)</sup>
Верхние индексы(superscript) Кроме того, существует показ предварительно отформатированного текста. Текст внутри контейнера <pre>...</pre> показывается моноширинным фонтом, все символы имеют одинаковую ширину, все пробелы и переходы на новую строку показываются без игнорирования.
5.9 Шрифты и цвет
Задаются тегом font: <font size=... color=...>...</font> Цвета (причем не только для фонтов, а и для фона окна и т.п.) задаются либо как одно из традиционных имен цветов, либо как интенсивности в RGB палитре в шестнадцетиричной нотации. Например: Black = "#000000" - черный Silver = "#C0C0C0" - серебряный Gray = "#808080" - серый White = "#FFFFFF" - белый Maroon = "#800000" - темно-красный Red = "#FF0000" - светло-красный Purple = "#800080" - темно-фиолетовый Fuchsia= "#FF00FF" - светло-фиолетовый Green = "#008000" - темно-зеленый Lime = "#00FF00" - светло-зеленый Olive = "#808000" - оливковый Yellow = "#FFFF00" - желтый Navy = "#000080" - темно-синий Blue = "#0000FF" - синий Teal = "#008080" - серо-синевато-зеленый Aqua = "#00FFFF" - аквамариновый При этом первые два 16-ричных символа после # обозначают интенсивность по красному цвету, следующие два- по зеленому, последние два - по синему. Так, строка <font color=#00FFFF>Пример задания цвета</font> будет показана аквамариновым цветом, в котором нет красной компоненты, а остальные две имеют максимальную интенсивность: Пример задания цвета Таблица цветов: aliceblue
(#F0F8FF) antiquewhite
(#FAEBD7) aqua
(#00FFFF) aquamarine
(#7FFFD4) azure
(#F0FFFF) beige
(#F5F5DC) bisque
(#FFE4C4) black
(#000000) blanchedalmond
(#FFEBCD) blue
(#0000FF) blueviolet
(#8A2BE2) brown
(#A52A2A) burlywood
(#DEB887) cadetblue
(#5F9EA0) chartreuse
(#7FFF00) chocolate
(#D2691E) coral
(#FF7F50) cornflowerblue
(#6495ED) cornsilk
(#FFF8DC) crimson
(#DC143C) cyan
(#00FFFF) darkblue
(#00008B) darkcyan
(#008B8B) darkgoldenrod
(#B8860B) darkgray
(#A9A9A9) darkgreen
(#006400) darkkhaki
(#BDB76B) darkmagenta
(#8B008B) darkolivegreen
(#556B2F) darkorange
(#FF8C00) darkorchid
(#9932CC) darkred
(#8B0000) darksalmon
(#E9967A) darkseagreen
(#8FBC8B) darkslateblue
(#483D8B) darkslategray
(#2F4F4F) darkturquoise
(#00CED1) darkviolet
(#9400D3) deeppink
(#FF1493) deepskyblue
(#00BFFF) dimgray
(#696969) dodgerblue
(#1E90FF) firebrick
(#B22222) floralwhite
(#FFFAF0) forestgreen
(#228B22) fuchsia
(#FF00FF) gainsboro
(#DCDCDC) ghostwhite
(#F8F8FF) gold
(#FFD700) goldenrod
(#DAA520) gray
(#808080) green
(#008000) greenyellow
(#ADFF2F) honeydew
(#F0FFF0) hotpink
(#FF69B4) indianred
(#CD5C5C) indigo
(#4B0082) ivory
(#FFFFF0) khaki
(#F0E68C) lavender
(#E6E6FA) lavenderblush
(#FFF0F5) lawngreen
(#7CFC00) lemonchiffon
(#FFFACD) lightblue
(#ADD8E6) lightcoral
(#F08080) lightcyan
(#E0FFFF) lightgoldenrodyellow
(#FAFAD2) lightgreen
(#90EE90) lightgray
(#D3D3D3) lightpink
(#FFB6C1) lightsalmon
(#FFA07A) lightseagreen
(#20B2AA) lightskyblue
(#87CEFA) lightslategray
(#778899) lightsteelblue
(#B0C4DE) lightyellow
(#FFFFE0) lime
(#00FF00) limegreen
(#32CD32) linen
(#FAF0E6) magenta
(#FF00FF) maroon
(#800000) mediumaquamarine
(#66CDAA) mediumblue
(#0000CD) mediumorchid
(#BA55D3) mediumpurple
(#9370DB) mediumseagreen
(#3CB371) mediumslateblue
(#7B68EE) mediumspringgreen
(#00FA9A) mediumturquoise
(#48D1CC) mediumvioletred
(#C71585) midnightblue
(#191970) mintcream
(#F5FFFA) mistyrose
(#FFE4E1) moccasin
(#FFE4B5) navajowhite
(#FFDEAD) navy
(#000080) oldlace
(#FDF5E6) olive
(#808000) olivedrab
(#6B8E23) orange
(#FFA500) orangered
(#FF4500) orchid
(#DA70D6) palegoldenrod
(#EEE8AA) palegreen
(#98FB98) paleturquoise
(#AFEEEE) palevioletred
(#DB7093) papayawhip
(#FFEFD5) peachpuff
(#FFDAB9) peru
(#CD853F) pink
(#FFC0CB) plum
(#DDA0DD) powderblue
(#B0E0E6) purple
(#800080) red
(#FF0000) rosybrown
(#BC8F8F) royalblue
(#4169E1) saddlebrown
(#8B4513) salmon
(#FA8072) sandybrown
(#F4A460) seagreen
(#2E8B57) seashell
(#FFF5EE) sienna
(#A0522D) silver
(#C0C0C0) skyblue
(#87CEEB) slateblue
(#6A5ACD) slategray
(#708090) snow
(#FFFAFA) springgreen
(#00FF7F) steelblue
(#4682B4) tan
(#D2B48C) teal
(#008080) thistle
(#D8BFD8) tomato
(#FF6347) turquoise
(#40E0D0) violet
(#EE82EE) wheat
(#F5DEB3) white
(#FFFFFF) whitesmoke
(#F5F5F5) yellow
(#FFFF00) yellowgreen
(#9ACD32)
Задание 6
Создайте HTML-документ, содержащий заголовки разного уровня, а также различного рода вложенные списки и стили текста на примере создания заготовки Вашей домашней странички.
Посмотрите,как документ будет выглядеть в браузере. Попробуйте изменить размер окна браузера и выясните, как ведёт себя текст. 6. Гиперссылки Часть текста или участок изображения в HTML-документах может ссылаться на другой текст внутри того же самго документа, или на другой документ в Internet. Такая связь называется гипертекстовой связью (hypertext link),гиперсвязью, гипертекстовой ссылкой или гиперссылкой. Она выделяется подчёркиванием и цветом.
При ссылке на документ, находящийся на другом сервере, необходимо указать адрес (URL - 'Uniform Recourses Location') этого документа: сетевой адрес сервера и путь к этому документу на сервере. Если документ находится на том же сервере, но в другой папке, достаточно указать только путь к этой папке.
В подавляющем большинстве случаев документ, на который делается ссылка, находится находится на том же сервере и в той же папке. В этом случае гипертекстовая ссылка имеет вид: <a href="имя_файла">текст_ссылки</a> Тут имя_файла - имя файла (с указанием расширения), содержащего документ, на который делается ссылка, а текст_ссылки - якорь, т. е. участок текста, который будет выделен как связанный с гиперсвязью. В общем случае перед именем файла ставится URL-адрес сервера и полный путь к файлу на сервере.
Язык HTML позволяет ссылаться не только на документы целиком, но и на отдельные части конкретного документа. В этом случае та часть документа, на который делается ссылка, называется меткой. То место, куда осуществляется переход называется меткой. Якорь задается в виде <a href="имя_файла#имя_метки">текст</a> , а метка - <a name="имя_метки">участок документа</a> Тут имя_метки - произвольное имя метки, на которую должен быть переход (уникальное для данного документа), а имя_файла - имя файла ( вместе с расширением и путём), содержащего документ, на какое-либо место которого осуществляется ссылка. Надо отметить, что переход производится в начало параграфа, в котором расположенна мишень. Поэтому делению текста на параграфы при наличии гиперсвязей внутри документа надо уделять особое внимание.
Замечание Программы просмотра текста имеют специальное средство, уменьшающее загрузку компьютерных сетей: буферизацию принятых сообщений, размер которых не превышает некоторую границу (ее можно менять в параметрах программы просмотра). Этот буфер хранится некоторое время (также задаваемое в параметрах программы просмотра - обычно дни или недели), на жеском диске на котором установлена программа просмотра. Те адреса, по которым вы еще "не ходили", показываются одним цветом ( по умолчанию синим), а по которым "ходили" (и документы еще хранятся в буфере) - другим цветом ( по умолчанию малиновым). Задание 7
Усовершенствуйте заготовку Вашей домашней странички. Добавьте гиперссылку на страницы: СПбГУ, физического факультета СПбГУ, НИИ физики СПбГУ, страницу Вашей кафедры, а также, при желании, страницу автора данного текста страницу автора данного текста, 7. Изображения Язык HTML позволяет вставлять в текст изображения, хранимые в отдельных графических файлах. Тег вывода изображения имеет следующий вид: <img src="имя_файла" width=ширина height=высота border=ширина_рамки hspase=отступ_вертикальный vspase=отступ_горизонтальный> , где имя_файла - имя графического файла (с указанием расширениея), содержащего изображение, ширина - ширина изображения, высота - высота изображения, ширина_рамки - ширина рамки вокруг изображения. Все размеры задаются в пикселах (точках экрана). Если реальные размеры изображения не совпадают с заданными в атрибутах width и height, то при показе оно масштабируется до этих размеров.
Атрибут border не обязателен, но желателен, если с картинкой асоциирована гиперсвязь.
Атрибуты hspase и vspase задают отступы от картинки по вертикали и горизонтали для текста или других картинок.
Рекомедуется всегда указывать ширину и высоту изображения, в противном случае программа просмотра будет вынуждена перед выводом изображения документа на экран загрузить как весь текстовой файл, так и все файлы с изображениями, что занимает много времени. Если же атрибуты width и height указаны, то текст покажется сразу, а изображения будут показываться по мере "подкачивания" по сети. Кроме того, объем текстовых файлов, как правило, намного меньше, чем у графических, и поэтому они получаются гораздо быстрее.
Для того, чтобы изображение служило гиперссылкой, достаточно поместить тег <img> внутрь тега <a href="адрес" > Задание 8
Усовершенствуйте заготовку Вашей домашней странички. Добавьте на неё какие-либо изображения - например, любимое Вами животное.Картинки можно взять из WWW. Сначала попробуйте сделать это сами с помощью поисковых систем. Если не удастся найти в информационном шуме - попробуйте в АПОРТ выбрать под строкой ввода пункт 'картинки', а затем ввести нужное слово (например, 'кошка'). Кстати, на картинку можно 'навесить' гиперссылку на найденный Вами сайт. 8. Таблицы Каждая таблица должна начинаться тегом <table> , a eсли у таблицы требуется внешняя рамка, то с параметром border ( возможны варианты border или border=ширина_рамки): <table border> и заканчиваться тегом </table> Таблицы задаются построчно, каждая строка начинается тегом <tr> и заканчиваться тегом </tr> Каждая графа (т. е. "ячейка", "клетка") в строке с данными должна начинаться тегом <td> и заканчиваться тегом </td> При этом ширина столбцов подбирается автоматически по максимальной ширине одной из клеток столбца. В таблицы так же можно вставлять гипертекстовые ссылки, произвольным образом отформатированный текст, рисунки и т. п. Общий вид таблицы: <table border> <tr> <td>...</td> <td>...</td> <td>...</td> <td>...</td> </tr> <tr> <td>...</td> <td>...</td> <td>...</td> <td>...</td> </tr> ... </table> Эта таблица содержит две строки и четыре графы (столбца). Поскольку в HTML перевод на новую строку равнозначен пробелу, а лишние пробелы игнорируются, текст в HTML-документах обычно форматируют с помощью переводов на новую строку так, чтобы не было слишком длинных строк. Поэтому приведенная выше таблица может быть записана так: <table border> <tr> <td>...</td> <td>...</td> <td>...</td> <td>...</td> </tr> <tr> <td>...</td> <td>...</td> <td>...</td> <td>...</td> </tr> </table> Вид документа при просмотре файла HTML-браузером (browser), естественно, не изменится.
Если в таблице нужны заголовки, они задаются тегами <hr>...</hr> Задание 9
Усовершенствуйте заготовку Вашей домашней странички. Добавьте на неё какую-либо таблицу. 9. Остальные теги В языке HTML существует большое количество других тегов. Дополнительную информацию и ссылки Вы можете найти на сайте http://barsic.spbu.ru/index_r.html в разделе по компьютерным языкам. Литература Т.Кенцл. Форматы файлов Internet./Пер. с англ. - СПб: ПИТЕР, 1997.-320 с. А.В.Фролов, Г.В. Фролов. Сервер Web своими руками. –М., ДИАЛОГ-МИФИ,1998.-288 с. (С)1996-2007 В.В.Монахов hotlog_js="1.0"; hotlog_r=""+Math.random()+"&s=190977&im=101&r="+escape(document.referrer)+"&pg="+ escape(window.location.href); document.cookie="hotlog=1; path=/"; hotlog_r+="&c="+(document.cookie?"Y":"N"); hotlog_js="1.1";hotlog_r+="&j="+(navigator.javaEnabled()?"Y":"N") hotlog_js="1.2"; hotlog_r+="&wh="+screen.width+'x'+screen.height+"&px="+ (((navigator.appName.substring(0,3)=="Mic"))? screen.colorDepth:screen.pixelDepth) hotlog_js="1.3" hotlog_r+="&js="+hotlog_js; document.write("")