Атрибут rel

Некоторые возможные значения перечислены ниже.

answer Ответ на вопрос. chapter Раздел или глава текущего документа. co-worker Ссылка на страницу коллеги по работе. colleague Ссылка на страницу коллеги (не по работе). contact Ссылка на страницу с контактной информацией. details Ссылка на страницу с подробностями. edit Редактируемая версия текущего документа. friend Ссылка на страницу друга. question Вопрос.

Весь список значений можно посмотреть по адресу http://wiki.whatwg.org/wiki/RelExtensions

В HTML5 поддерживается следующие значения.

archives Ссылка на архив сайта. author Ссылка на страницу об авторе на том же домене. bookmark Постоянная ссылка на раздел или запись. first Ссылка на первую страницу. help Ссылка на документ со справкой. index Ссылка на содержание. last Ссылка на последнюю страницу. license Ссылка на страницу с лицензионным соглашением или авторскими правами. me Ссылка на страницу автора на другом домене. next Ссылка на следующую страницу или раздел. nofollow Не передавать по ссылке ТИЦ и PR. noreferrer Не передавать по ссылке HTTP-заголовки. prefetch Указывает, что надо заранее кэшировать указанный ресурс. prev Ссылка на предыдущую страницу или раздел. search Ссылка на поиск. sidebar Добавить ссылку в избранное браузера. tag Указывает, что метка (тег) имеет отношение к текущему документу. up Ссылка на родительскую страницу.

HTML 4.01 IE Cr Op Sa Fx

Cсылки в HTML - тег A

Тег A (Anchor - якорь) является одним из самых необходимых элементов HTML. По своей структуре тег А является тегом - контейнером. Внутри этого тега может содержатся текст, а также следующие строчные элементы, как ABBR, ACRONYM, B, BDO, BIG, BR, BUTTON, CITE,CODE, DFN, EM, I, IMG, INPUT, KBD, LABEL, MAP, OBJECT, Q, SAMP, SELECT, SCRIPT, SMALL, SPAN, STRONG, SUB, SUP, TEXTAREA, TT, VAR, а также DEL и INS(в зависимости от контента). Тег А не может быть вложеным, т.е. находится внутри тега А. Ни один из атрибутов тега А не является обязательным. Ссылка может указывать на любой документ находящийся в Интернете(html, avi, jepg, doc, avi и т.д.)

Тег А необходимо использовать только для создания ссылки или якоря. Для задания элементу нужного указателя при наведении мыши - используйте тег SPAN совместно с таблицами стилей (свойство cursor).

Если в ссылочном теге A используется атрибут HREF, то тег устанавливает ссылку. т.е. адрес(URL-Universal Resource Location, Универсальный указатель рессурсов), на документ, к которому мы можем перейти. Переход может осуществляться на другой сайт, на закладку, как установленную внутри текущего сайта, так и в другом сайте. Адерес гиперссылки может быть абсолютным или относительным. Абсолютный адрес не зависит от имени сайта или страницы, где прописана гиперссылка, а значит он может работать всюду. Относительные адреса ссылок строятся относительно текущего документа или корня сайта.

Если в теге А применяется атрибут NAME, то этот тег служит для задания имени закладки, установленной внутри веб-страницы. Вместо атрибута NAME может использоваться атрибут ID. Если вы хотите использовать оба эти атрибуты, то значение их должно быть идентичным. При использовании этого атрибута стоит помнить, что тег А с таким атрибутом может не пройти валидацию по стандарту XHTML 1.1.

В спецификации HTML 5 атрибут NAME отсутствует, а поэтому тег А всегда ссылка. Если атрибут HREF отстствует то тег А всего лишь заполнитель ссылки. В этой спецификации появляются новые атрибуты, а некоторые раннее использованые атрибуты являются не допустимыми.

В различных браузерах ссылки отображаются следующим образом:

• Непосещенные ссылки подчеркнуты и окрашены синим цветом.
• Посещенные ссылки подчеркнуты и окрашены пурпурным цветом.
• Активные ссылки подчеркнуты и окрашены красным цветом.

Тег поддерживается следующими браузерами и их версиями:

Good HTML sample chapter

The purpose of a web page is the message. The message of the page is sometimes in the words, sometimes in the images, and sometimes in other elements of the page, but the message is rarely in the code itself. So why bother writing good HTML?

The way the message is delivered can have impact on how it is received. HTML is one link in the chain of media that carries your web-based message. Ask a painter why they choose one type of canvas over another, or ask a musician why they choose a type of string or reed or bow for their instrument. You may not be able to discern what type of strings are on a guitar by listening to a recording (although Bill says he can), but it does affect the overall quality of the experience.

Why Write Good HTML?

There are both subjective and objective reasons for writing good HTML. Subjectively, it may or may not be important to you that you do as good a job as possible on every level of every project that you take on. We feel that doing something well is its own reward, but we recognize that it's not always practicable.

On the other hand, there are some very pragmatic reasons to at least make sure that your HTML is correct, in spite of the fact that it may already work. As a practical illustration, here's a page that works fine in browsers that are based on the original NCSA Mosaic (including Microsoft Internet Explorer and older Netscape browsers), but does not work in the current Netscape:

Notice that there is no end tag for the TABLE element ( </TABLE> ). The end tag is required for the TABLE element--according to both the table specification and the HTML 4 specification. It works just fine in Microsoft Internet Explorer, but Netscape Navigator (beginning with version 3) won't display a table without an end tag.

In the case of the missing table end tags, there were a number of web sites that virtually "disappeared" when Netscape 3 was released. A similar problem happened with body backgrounds with the release of Netscape 4 (see the example later in this chapter).

HTML Terminology

Probably the single most important thing you can learn about HTML is the distinction between tags, attributes, containers, and elements. Once you understand these terms, it will be much easier for you to tell when your code is correct. Here's what they mean:

Tag A tag is an HTML instruction enclosed in angle-brackets (e.g. <P> ). Some tags may also have end tags that begin with a slash (e.g. </P> ). The tag without the slash is sometimes called a begin tag or a start tag.

Container A container is a tag that has both a beginning and an end, and generally has content that is placed in between. The beginning of a container is marked by a begin tag, and the end is marked by an end tag. For example, TITLE is a container because it has a distinct beginning and end. The content of a TITLE is in between the tags, (e.g. <TITLE> content </TITLE> ). In contrast, BR is not a container because it has no end tag; everything it needs is between the brackets of the BR tag. Some containers, like P for instance, do not require end tags if the end can be accurately determined by context. But they are still containers because they have content and a limited scope of operation. In the absence of an end tag, the effects of a P tag end when the next P. or some other tag that is not valid content for P. is encountered. This is true of many containers with optional end tags.

Element Element is a general term for a chunk of HTML that can be treated as a distinct unit in some context. A container, along with all its content, can be considered an element (e.g. <STRONG> This is a STRONG element </STRONG> ). A stand-alone tag, like IMG. can also be considered an element (e.g. <IMG SRC="element.gif"> ). This term is used as a convenience of nomenclature whenever we need to discuss some distinct part of a document or code.

What You See AIN'T What You Get

WYSIWYG editors are a wonderful invention, and we encourage you to use them for prototyping your web sites. The use of a WYSIWYG editor can greatly reduce the amount of time it takes you to layout, view, and re-layout your site while you are in the process of designing it.

But for production work, we implore you to be careful. An excellent example of the problem is the "disappearing background" problem that happened with the release of Netscape 4.

The HTML specification allows for one BODY element per page. Both the begin and end tags are optional (that is, the body of the document can be implied if the default properties are acceptable), but you are not allowed to have more than one BODY element in a single document.

However, there are evidently some WYSIWYG editors that don't follow this rule. We have seen a number of sites with two or more BODY tags, and this has created problems with some browsers. The early release versions of Netscape Navigator 4 would ignore the additional BODY tags and only use the attributes of the first one. For example, consider this HTML:

Later releases of Navigator 4 (beginning with 4.03) accumulate attributes from BODY tags. But you really can't count on a browser guessing what your HTML means when it's not correct. For instance, Mosaic 3.0 (the last version) also shows a gray background for this error.

The best defense is good HTML.

Cleaning Up After a WYSIWYG Editor

As an example of the sorts of things you need to watch out for with your WYSIWYG editors, I have created a little page using Alaire's Home Site.

Let's look at the code and see if we can fix it up.

The most glaring problem in the HTML on the previous page is that the background image didn't show up in the browser (even though it was fine in the editors preview screen). Notice that the URL for the BACKGROUND attribute is not a proper relative URL. This is easy to fix, but it shows a flaw in the editor.

The point here is for you to expect flaws in the code that the editor puts out. Always expect to have to fix the code that an automated tool generates. Some people say that the tools will get better, and that's probably true. But the fact remains that after 20 years of trying, there are still no automated tools for any programming language that do as good a job as a careful human. The promise of artificial intelligence that can better a human's creative efforts is yet to be realized. We don't expect that overall situation to change any time soon.

We also noticed that the tool doesn't break its lines to fit an 80-column screen (this is important for those of us who use multiple platforms to work on the same files), and the use of tabs for indenting is also not portable. Again, these are easy problems to fix, but they require effort. Always prepare for more complicated pages to have more complicated problems.

As a rule, we feel that the WYSIWYG editors are excellent tools for prototyping (indeed, we use them as such), but not for production use. If you must create and maintain a large and complex web site with constantly up-dated information (like a large news or periodical site), we recommend that you either create custom tools for that particular site (as most of the large major sites do) or retain the services of a programmer to do that for you. For large one-time sites that won't change much over time, you can prototype with your WYSIWYG editor and then modify or rewrite the code by hand to make it correct.

Common HTML Gotchas

There are many common HTML "gotchas" that we see a lot on the web. Of course, each of us has our own peculiar predilection for error, and as such, our problems will not always fit nicely into a preordained list. But we've compiled a short list that you may want to watch out for anyway. These are some of the most frequent HTML problems we see on public web pages.

What's in a Quote?

Quotation marks (either double " or single ') are used in HTML to contain the values of some attributes. When do you need to use quotes? If all the characters in the value are either letters and A-Z), numbers (0-9), periods (.), or hyphens (-), you don't need to use quotes. If you have any characters besides those mentioned, you need to use quotes. When in doubt, use the quotes. They can't hurt.

Hanging Quotes

On the other hand, you have to use your quotes in matching pairs! For example, this doesn't work well:

Notice the missing quote in the first link. You don't see it? Look here then. The folks at Netscape gave us this handy-dandy missing quote finder in their View:Source menu, starting with version 3. When you view the source of a document with a missing quote, all the text that's affected will be highlighted and blinking. Try this for yourself: find the bad-quote.html file in the chap19 folder of the <chd> CD-ROM and look at it in Netscape Navigator. Be sure to select View:Source. See it blink? Tell a friend.

Straddling Containers

Considering the fact that a container--along with all of its content--is a single distinct element, it is reasonable that one container can have other containers as part of its content. That's why you can write something like this: <P> This paragraph has <EM> emphasized and <STRONG> strong </STRONG> text </EM> inside it. </P>

In this perfectly legal example, the P element contains the EM element, which in turn contains the STRONG element.

Now consider this example: <P> This paragraph has <EM> emphasized and <STRONG> strong </EM> text </STRONG> inside it. </P>

Here we decided to end the EM element before the end of the STRONG element. What's wrong with this picture? Notice that EM no longer contains STRONG (nor does STRONG contain EM ). The elements are straddling each other.

It is perfectly legal to have one element contain another element, as long as the inner element is valid content for the outer element. But it is not legal to have two element straddle each other. As with many common HTML errors, this may work in some browsers today, and it may not work in later versions of those same browsers.

Line Endings

Unless you are actually trying to make your HTML unreadable (some people actually want to make it a little tougher to "steal" their code), you should keep your lines to under 80 characters wide (75 is a good rule of thumb). That makes it easier to view your source code in the browser and to work on it on the widest possible variety of platforms.

You should also set your editor to use UNIX line-endings, especially if your server runs under UNIX.

There are three different types of line-endings:

Htmlbook a

black RGB #000000 HSB 0/0/0 черный

dimgray RGB #696969 HSB 0/0/41 тускло-серый

gray RGB #808080 HSB 0/0/50 серый

darkgray RGB #A9A9A9 HSB 0/0/66 темно-серый

lightgrey RGB #D3D3D3 HSB 0/0/83 светло-серый

gainsboro RGB #DCDCDC HSB 0/0/86 Гейнсборо

whitesmoke RGB #F5F5F5 HSB 0/0/96 дымчатый

white RGB #FFFFFF HSB 0/0/100 белый

snow RGB #FFFAFA HSB 0/2/100 снежный

rosybrown RGB #BC8F8F HSB 0/24/74 розово-коричневый

lightcoral RGB #F08080 HSB 0/47/94 светло-коралловый

indianred RGB #CD5C5C HSB 0/55/80

brown RGB #A52A2A HSB 0/75/65 коричневый

firebrick RGB #B22222 HSB 0/81/70 кирпичный

maroon RGB #800000 HSB 0/100/50 густой красно-коричневый

darkred RGB #8B0000 HSB 0/100/55 темно-красный

red RGB #FF0000 HSB 0/100/100 красный

salmon RGB #FA8072 HSB 6/54/98 лососевый

mistyrose RGB #FFE4E1 HSB 6/121/100 туманно-розовый

tomato RGB #FF6347 HSB 9/72/100 томатный

darksalmon RGB #E9967A HSB 15/48/91 темно-лососевый

coral RGB #FF7F50 HSB 16/69/100 коралловый

orangered RGB #FF4500 HSB 16/100/100 оранжево-красный

lightsalmon RGB #FFA07A HSB 17/52/100 светло-лососевый

sienna RGB #A0522D HSB 19/72/63 сиена (охра)

seashell RGB #FFF5EE HSB 25/7/100 морской раковины

saddlebrown RGB #8B4513 HSB 25/86/55 кожаного седла

chocolate RGB #D2691E HSB 25/86/82 шоколадный

peachpuff RGB #FFDAB9 HSB 28/27/100 персиковый

sandybrown RGB #F4A460 HSB 28/61/96 рыжеватый

linen RGB #FAF0E6 HSB 30/8/98 льняной

peru RGB #CD853F HSB 30/69/80

bisque RGB #FFE4C4 HSB 33/23/100 бисквитный (светло-коричневый)

darkorange RGB #FF8C00 HSB 33/100/100 темно-оранжевый

antiquewhite RGB #FAEBD7 HSB 34/14/98 древний (античный) белый

tan RGB #D2B48C HSB 34/33/82 дубильной коры (желтовато-коричневый)

burlywood RGB #DEB887 HSB 34/39/87 плотной древесины

blanchedalmond RGB #FFEBCD HSB 36/20/100 миндальный (чищеного миндаля)

navajowhite RGB #FFDEAD HSB 36/32/100

papayawhip RGB #FFEFD5 HSB 37/16/100 побега папайи

moccasin RGB #FFE4B5 HSB 38/29/100

oldlace RGB #FDF5E6 HSB 39/9/99 старого кружева

wheat RGB #F5DEB3 HSB 39/27/96 пшеничный

orange RGB #FFA500 HSB 39/100/100 оранжевый

floralwhite RGB #FFFAF0 HSB 40/6/100 цветочно-белый

goldenrod RGB #DAA520 HSB 43/85/85 золотисто-красный

darkgoldenrod RGB #B8860B HSB 43/94/72 темный золотисто-красный

cornsilk RGB #FFF8DC HSB 48/14/100 молодой кукурузы corn silk - шелковистые нитевидные пестики початков неспелой кукурузы (амер.)

gold RGB #FFD700 HSB 51/100/100 золотистый

lemonchiffon RGB #FFFACD HSB 54/20/100 лимонного шифона

khaki RGB #F0E68C HSB 54/42/94 хаки

palegoldenrod RGB #EEE8AA HSB 55/29/93 бледный золотисто-красный

darkkhaki RGB #BDB76B HSB 56/43/74 темный хаки

ivory RGB #FFFFF0 HSB 60/6/100 слоновой кости

beige RGB #F5F5DC HSB 60/10/96 беж

lightyellow RGB #FFFFE0 HSB 60/12/100 светло-желтый

olive RGB #808000 HSB 60/100/50 оливковый

yellow RGB #FFFF00 HSB 60/100/100 желтый

olivedrab RGB #6B8E23 HSB 80/75/56 нежно-оливковый

yellowgreen RGB #9ACD32 HSB 80/76/80 желто-зеленый

darkolivegreen RGB #556B2F HSB 82/56/42 темный оливково-зеленый

greenyellow RGB #ADFF2F HSB 84/82/100 зелено-желтый

lawngreen RGB #7CFC00 HSB 90/100/99 зеленой лужайки

chartreuse RGB #7FFF00 HSB 90/100/100 шартрез (бледно-зеленый)

honeydew RGB #F0FFF0 HSB 120/6/100 медовой росы

darkseagreen RGB #8FBC8F HSB 120/24/74 темный морской волны

lightgreen RGB #90EE90 HSB 120/39/93 светло-зеленый

palegreen RGB #98FB98 HSB 120/39/98 бледно-зеленый

forestgreen RGB #228B22 HSB 120/76/55 лесной зелени

limegreen RGB #32CD32 HSB 120/76/80 зеленого лайма лайм - цитрус, похожий на зеленый лимон

darkgreen RGB #006400 HSB 120/100/39 темно-зеленый

green RGB #008000 HSB 120/100/50 зеленый

lime RGB #00FF00 HSB 120/100/100 лайма лайм - цитрус, похожий на зеленый лимон

seagreen RGB #2E8B57 HSB 146/67/55 морской волны

mediumseagreen RGB #3CB371 HSB 147/66/70 умеренный морской волны

mintcream RGB #F5FFFA HSB 150/4/100 мятного крема

springgreen RGB #00FF7F HSB 150/100/100 весенней зелени

mediumspringgreen RGB #00FA9A HSB 157/100/98 умеренный весенней зелени

mediumaquamarine RGB #66CDAA HSB 160/50/80 умеренный аквамариновый

aquamarine RGB #7FFFD4 HSB 160/50/100 аквамариновый (зеленовато-голубой)

turquoise RGB #40E0D0 HSB 174/71/88 бирюзовый

lightseagreen RGB #20B2AA HSB 177/82/70 светлый морской волны

mediumturquoise RGB #48D1CC HSB 178/66/82 умеренный бирюзовый

azure RGB #F0FFFF HSB 180/6/100 лазурный

paleturquoise RGB #AFEEEE HSB 180/26/93 бледно-бирюзовый

darkslategray RGB #2F4F4F HSB 180/41/31 темный аспидно-серый (темно-синевато-серый)

teal RGB #008080 HSB 180/100/50 teal - чирок (птица)

darkcyan RGB #008B8B HSB 180/100/55 темно-циановый

aqua RGB #00FFFF HSB 180/100/100 морской волны

cyan RGB #00FFFF HSB 180/100/100 циановый

lightcyan RGB #E0FFFF HSB 180/121/100 светло-циановый

darkturquoise RGB #00CED1 HSB 181/100/82 темно-бирюзовый

cadetblue RGB #5F9EA0 HSB 182/41/63

powderblue RGB #B0E0E6 HSB 187/23/90 голубой пороши powder - 1) порошок, пыль; 2) легкий снег, пороша; 3) пудра; 4) порох

lightblue RGB #ADD8E6 HSB 195/25/90 светло-голубой

deepskyblue RGB #00BFFF HSB 195/100/100 насыщенный небесно-голубой

skyblue RGB #87CEEB HSB 197/43/92 небесно-голубой

lightskyblue RGB #87CEFA HSB 203/46/98 светлый небесно-голубой

steelblue RGB #4682B4 HSB 207/61/71 голубовато-стальной

aliceblue RGB #F0F8FF HSB 208/6/100

slategray RGB #708090 HSB 210/22/56 аспидно-серый

lightslategray RGB #778899 HSB 210/22/60 светлый аспидно-серый

dodgerblue RGB #1E90FF HSB 210/88/100

lightsteelblue RGB #B0C4DE HSB 214/21/87 светлый голубовато-стальной

cornflowerblue RGB #6495ED HSB 219/58/93 васильковый

royalblue RGB #4169E0 HSB 225/71/88 королевский голубой

ghostwhite RGB #F8F8FF HSB 240/3/100 призрачно-белый

lavender RGB #E6E6FA HSB 240/8/98 лавандовый (бледно-лиловый)

midnightblue RGB #191970 HSB 240/78/44 синей полночи

navy RGB #000080 HSB 240/100/50 флотский

darkblue RGB #00008B HSB 240/100/55 темно-синий

mediumblue RGB #0000CD HSB 240/100/80 умеренный голубой (синий)

blue RGB #0000FF HSB 240/100/100 голубой (синий)

darkslateblue RGB #483D8B HSB 248/56/55 темный аспидно-синий

slateblue RGB #6A5ACD HSB 248/56/80 аспидно-синий

mediumslateblue RGB #7B68EE HSB 249/56/93 умеренный аспидно-синий

mediumpurple RGB #9370DB HSB 260/49/86 умеренный пурпурный

blueviolet RGB #8A2BE2 HSB 271/81/89 сине-фиолетовый

indigo RGB #4B0082 HSB 275/100/51 индиго

darkorchid RGB #9932CC HSB 280/75/80 темно-лиловый

darkviolet RGB #9400D3 HSB 282/100/83 темно-фиолетовый

mediumorchid RGB #BA55D3 HSB 288/60/83 умеренный лиловый

thistle RGB #D8BFD8 HSB 300/12/85 чертополоха

plum RGB #DDA0DD HSB 300/28/87 сливовый (темно-фиолетовый с оттенками бордового)

violet RGB #EE82EE HSB 300/45/93 темно-лиловый, фиолетовый

purple RGB #800080 HSB 300/100/50 пурпурный purple - 1) пурпурный, багровый; 2) фиолетовый

darkmagenta RGB #8B008B HSB 300/100/55 темный фуксин

fuchsia RGB #FF00FF HSB 300/100/100 фуксии

magenta RGB #FF00FF HSB 300/100/100 фуксин, красная анилиновая краска

HtmlBook v

• You are allowed to use this program for testing and evaluation until a next version is available.
• The program, in its current version, may be installed on as many machines as you like.
• You are free to distribute the program provided that you include all the files in the original archive without any modification.
• You are not allowed to sell the program, but can charge a reasonable amount to cover the cost of the distribution media.
• Under no circumstances will the author be liable for any loss or damage that may be derived from the use of the program.
• HtmlBook is the copyrighted property of Alessandro Felice Cantatore, Bitonto, Bari, Italy.

The use of the program implies acceptance of the conditions stated above! Introduction

For various reasons, the html format is probably the most suitable for writing computer related documentation: it is simple, supports most national languages and codepages, html browser are available for all the operating systems, there are plenty of programs to create html files, etc.

On the other side, html documentation comes divided in many different files, does not provide an easy method to search text among all those files, sometimes makes it hard to find a starting point (quite often the first page is not called index.html) and does not provide a standard way to browse a document page by page (i.e. many documents just provide a "contents" page with no link to go from a page to the previous or the next one).

1. unzip all the files in a termporary path,
2. open the folder containing the temporary files,
3. find the first page,
4. double click on it to start the html viewer.

HtmlBook, when in viewing mode, runs in background so that as soon as a packaged html document (a file with ".htb" extension), is opened, the proper page is displayed in your favourite html browser.

The purpose of the current implementation is mostly a proof of concept. In future, according to the users' feedback I'll try to add soem essential feature like text searching both in the single HtmlBook files and in multiple files, with the option to associate a set of keywords to each HtmlBook file.

Important note: The format of the HtmlBook files (the default extension is ".htb") is subject to change. In order to improve the performance of text searching, since the next version I may adopt a different format.

Installing HtmlBook is easy, even if there is no real installer, but just a couple of REXX scripts to create/destroy program objects.

1. create a directory for the program files;
2. unzip htmlbook01.zip there;
3. run makeobj.cmd to create:
   • the HtmlBook folder in your Desktop\Programs\Utilities folder (or directly on the Desktop if the previous path is not found)
   • the HtmlBook program object associated with the ".htb" files;
   • the Creator object to create new HtmlBook files;
   • the Options object to set the program options;
   • the Documentation object, that is this file.
4. download and install ZIP.EXE and UNZIP.EXE in a directory specified in the "PATH" environment variable.

1. open the folder where you unzipped the program files;
2. run delobj.cmd to destroy all the program objects;
3. delete the folder.

The application consists in a unique executable which operates in different ways according to the startup parameters: no parameters displays a list of the previously viewed files or the file selection dialog; name of an HtmlBook file opens the HtmlBook document; /C (or /c, -C, -c) opens the HtmlBook creation window ; /O (or /O, -o, -O) opens the HtmlBook options dialog.

The current set of features is quite limited as currently you can just create and view HtmlBook files.

• to click on a item to put the item name in the field below the list so that one can open it via the Open button (optionally after having modified it to open a file with a slightly different name, not yet in the list);
• to double click on an item to directly open the file;
• to type a file name in the entry field and then click on the Open button;
• to select a file via the standard file dialog by the browse button (the ". " button);
• to terminate the program via the Exit button.

Создание сайта

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

Для создания ссылки необходимо сообщить браузеру, что является ссылкой, а также указать адрес документа, на который следует сделать ссылку. Оба действия выполняются с помощью тега <A>. который имеет обязательный параметр href. В качестве значения используется адрес документа (URL, Universal Resource Locator, универсальный указатель ресурсов).

Адрес может быть абсолютным и относительным. Абсолютные адреса должны начинаться с указания протокола и содержать имя сайта (домена), например, ссылка вида http://www.htmlbook.ru является абсолютной и ведет на главную страницу сайта htmlbook.ru. В примере 7.1 показано создание абсолютной ссылки на другой сайт.

Пример 7.1. Использование абсолютных ссылок

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<meta content="text/html; charset=Windows-1251" http-equiv="content-type">

<title>Использование ссылок</title>

</head>

<body>

</body>

</html>

Для создания абсолютной ссылки в Nvu, выделите текст и нажмите на кнопку на панели инструментов или выберите пункт меню Вставка > Ссылка (<Ctrl>+<L>). После чего откроется окно, где следует ввести полный адрес требуемой веб-страницы или сайта (рис. 7.1).

Рис. 7.1. Добавление адреса ссылки

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

При создании локальных ссылок надо понимать, какой путь (URL) в каком случае следует указывать, поскольку он зависит от расположения файлов. Рассмотрим несколько типичных вариантов.

1. Файлы располагаются в одной папке (рис. 7.2).

Необходимо сделать ссылку из исходного документа на ссылаемый. В таком случае код будет следующий.

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

2. Файлы размещаются в разных папках (рис. 7.3).

Когда исходный документ хранится в одной папке, а ссылаемый в корне сайта, то перед именем файла в адресе ссылки следует поставить две точки и слэш (/), как показано в примере.

3. Файлы размещаются в разных папках (рис. 7.4).

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

Аналогично обстоит дело с любым числом вложенных папок.

4. Файлы размещаются в разных папках (рис. 7.5).

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

Заметьте, что никаких дополнительных точек и слэшей перед именем папки нет. Если файл находится внутри не одной, а двух папок, то путь к нему записывается так.

Иногда можно встретить путь к файлу относительно корня сайта, он выглядит как “/Папка/Имя файла” со слэшем вначале. Учтите, что такая форма записи не работает на локальном компьютере, а только под управлением веб-сервера.

При создании локальной ссылки Nvu самостоятельно подставит нужный путь к файлу, вам требуется лишь выбрать файл, на который следует сделать ссылку (рис. 7.6).

Рис. 7.6. Создание локальной ссылки

При этом нужно поставить флажок на пункте «Относительный URL», чтобы путь к файлу был локальным.

По умолчанию, при переходе по ссылке документ открывается в текущем окне. При необходимости, это условие может быть изменено параметром target тега <А>. Если установить у target значение _blank. как показано в примере 7.2, то отроется новое окно и документ, на который ведет ссылка, загрузится в нем.

Пример 7.2. Открытие документа в новом окне

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<meta content="text/html; charset=Windows-1251" http-equiv="content-type">

</head>

<body>

</body>

Чтобы указать в Nvu, что ссылка будет открываться в новом окне, при ее создании нажмите на кнопку «Расширенные свойства» (рис. 7.6) и в дополнительном разделе выберите пункт «в новом окне», как показано на рис. 7.7.

Рис. 7.7. Изменение свойств ссылки

Как создать сайт - Руководство от htmlbook2007

3-1.(продолжение) Изображение-карта

Теперь давайте рассмотрим более сложный пример. Представим себе, что надо сделать сайт, посвященный описанию старинного компьютера ATARI-800. Уже подготовлены файлы с описанием его монитора, самого компьютера и дисковода: monitor.html, computer.html и diskovod.html (мы для проверки работоспособности примера тоже создали такие файлы, но в них ничего нет, кроме заголовка). Наша задача: создать титульную страницу сайта и поместить на нее изображение компьютера (рис. 3.4).

При этом логично было бы сделать так, чтобы щелчок на изображении монитора переводил читателя на страничку с описанием монитора, щел чок на изображении дисковода — на страничку с описанием дисковода и щелчок на изображении самого компьютера — на страничку с его описанием. Можно, конечно, “разрезать” изображение на три и с каждого дать гиперссылку на соответствующий файл. Но при этом разрушится целостность композиции на фотографии компьютера. Что же делать?

Оказывается, есть возможность установить несколько гиперссылок с одного рисунка, не “разрезая” его! Такое изображение называется кар той графических ссылок (imagemap>. Создание карты графических ссылок — операция довольно кропотливая, но результат обычно довольно эффектен. Делается это так.

Вот, например, наш файл diskovod.html:

<HTML>

<НЕАD>

<ТIТLЕ>ДИСКОВОД</ТIТLЕ>

</НЕАD>

<ВODY>ОПИСАНИЕ ДИСКОВОДА</BODY>

</HTML>

Рис. 3.4. Изображение компьютера, из которого мы будем делать

графическую карту ссылок

1. Сначала рисунок внедряется на веб-страницу обычным образом, с помощью тега <IMG>:

<IMG SRC="Images/computer.gif" WIDTH="451" HEIGHT="310" BORDER="0" ALT="ATARI-800">

2. Затем необходимо установить в этом теге атрибут USEMAP=. Его значение должно содержать имя карты графических ссылок, с предвари тельным знаком #, Если карта еще не создана, как в нашем случае, то ей можно дать любое имя:

<IMG SRC="Images/computer.gif" WIDTH="451" HEIGHT="310" BORDER="0" ALT="ATARI-800" USEMAP="#compmap">

3. Теперь нужно создать собственно карту ссылок. Вообще говоря, эта карта может располагаться где угодно, хоть в другом файле — тогда в атрибуте USEMAP= нужно будет указать, кроме имени карты, имя этого файла, например: “mapfile.html#mymap”). В нашем случае давайте рас положим ее в конце того же файла.

4. Карта графических ссылок начинается с тега < МАР> и завершается зак рывающим тегом </МАР>. В теге <МАР> следует установить (обязательно!) единственный возможный атрибут NAME=. Его значением должно быть имя карты, на которое мы ссылались в теге <МАР> (с помощью атрибута USEMAP=). В данном случае это должно быть имя "compmap":

<МАР NAME="compmap">

5. Между тегами <МАР> и </МАР> должна находиться основная часть карты. Она состоит из нескольких тегов <AREA>. каждый из которых определяет активную область рисунка. (При щелчке мыши на “актив ных областях” может происходить перемещение по гиперссылке, а остальная часть изображения ничем не отличается от обычного рисунка.) В данном случае нам нужно определить три такие “активные области”: изображение монитора, компьютера и дисковода.

6. “Активные области” могут быть либо прямоугольной формы, либо круглой, либо многоугольной. Это определяется установкой значения атрибута SHAPE= в теге <AREA> (он употребляется без закрывающего тега). Если значение этого атрибута — "rect", область будет прямоугольной, если "circle" — круглой, а если "poly" — многоугольной.

7. Дальше начинается самое неприятное в составлении карты графических ссылок: нужно определить координаты каждой из активных областей и записать их как значения атрибута COORDS=.

Если “активная область” прямоугольная, то следует указать координаты левого верхнего ее угла и правого нижнего. Местоположение любой точки на рисунке может быть определено с помощью двух чисел — ее горизонтальной и вертикальной координат. Самая левая верхняя точка на рисунке имеет координаты “0,0”. Чем больше горизонтальная координата, тем правее расположена точка, и, соответственно, чем больше вертикальная координата, тем точка ниже. Например, если рисунок имеет размер 400х300 точек и нам нужно определить прямо угольнуюактивную область, занимающую его левый верхний угол и имеющую половину ширины и высоты рисунка, мы должны будем написать следующее:

<AREA SHAPE="rect" COORDS="0,0,200,150">

В этой записи атрибут COORDS= определяет прямоугольник с помощью двух точек: одна из них имеет координаты “0,0”, то есть левый верх ний угол, а другая — “ 200,150”, то есть это центральная точка рисунка размером 400х300.

Если “активная область” круглая, то задача немного упрощается: нужно определить координаты только одной точки — центра окружности, а также указать ее радиус, например:

<AREA SHAPE="circle" COORDS="200,150, 40">

Такая запись определяет круглую “активную область”, расположенную в центре нашего гипотетического рисунка размером 400х300 (координаты центральной точки— “200,150”). Окружность имеет радиус 40 точек.

И, наконец, самый сложный и наиболее часто встречающийся случай — многоугольная “активная область”. Здесь нужно последовательно указать координаты всех углов многоугольника. Поскольку таких углов может быть очень много, то и значение атрибута COORDS= при обретает угрожающие размеры. Рассмотрим простой пример. Если на нашем рисунке размером 400х300 мы хотим определить область в форме равнобедренного треугольника, основание которого проходит ровно посередине рисунка, занимая всю его ширину, а вершина нахо дится посередине верхней границы рисунка, то это можно сделать так:

<AREA SHAPE="poly" COORDS="0,150,400,150,200,0">

Как видите, шесть координат определяют три точки — три угла нашего треугольника. В данном случае их последовательность не очень важна (можно было написать, например, "400,150,0,150,200,0"), но когда коли чество углов больше, становится важным порядок соединения точек. Например, записи

<AREA SHAPE="poly" COORDS="0,0,200,0,200,150,100,75,0,150">

<AREA SHAPE="poly" COORDS="0,0,200,0,100,75,200,150,0,150">

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

Отпугивающим моментом в этой технологии является то, что приходится каким-то образом выяснять координаты каждой нужной точки. На реальном рисунке это невозможно сделать “на глаз”, и приходится, к примеру, выяснять все координаты в каком-либо графическом редакторе, а уже потом переносить их в HTML-документ. К счастью, в послед них версиях некоторых HTML-редакторов (например, Allaire Homesite) имеются встроенные средства для установки координат на картах графических ссылок.

9. Кроме того, бывает полезно определить также атрибут ALT=. Его значе ние может содержать поясняющий текст, который будет “всплывать” при наведении мыши на “активную область”.

Итак, теперь мы можем попытаться обвести “активные области” нашего изображения компьютера (см. рис. 3.4). Естественно, что все они должны быть многоугольными, так как ни один из трех объектов не “укладывается” в прямоугольник или круг. Посмотрим, что получится в результате.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 TRANSITIONAL//EN">

<HTML>

<HEAD>

<TITLE>Описание компьютера</TITLE>

</HEAD>

<BODY BGCOLOR="#FFA940" TEXT="#1A1A1A" LINK="#OOOOAO" VLINK="#OOOOAO" ALINK="#OOOOAO">

<DIV ALIGN-"center"><H1>ATARI-800</Hl></DIV>

<DIV ALIGN="center"><BIG>3necь представлено описание старинного компьютера ATARI-800. Вот как он выглядел :</BIGX/DIV>

<DIV ALIGN="center"><IMG SRC="Images/computer.gif" WIDTH="451" HEIGHT="310" BORDER="0" ALT="ATARI-800" USEMAP="#compmap"></DIV>

<DIV ALIGN="center">Для получения подробной информации о каждом узле щелкните на его изображении.</DIV>

</BODY> <МАР NAME="compmap">

<AREA ALT="МОHИTOР" SHAPE="poly"

</МАР>

Результат этих трудов представлен на рис. 3.5. Как видите, на первый взгляд рисунок на страничке вполне обычный — наличие “активных областей” ничем не выдается. Поэтому необходима поясняющая подпись под рисунком.

Если поводить мышью над рисунком, то можно заметить, что над “актив ными областями” указатель мыши меняет свой вид, а если приостановить мышь над “активной областью” — появится соответствующая всплыва ющая надпись. И еще интересный момент: в большинстве броузеров можно воочию увидеть границы активных областей. Для этого надо нажать кнопку мыши на “активной области”, и, не отпуская ее, увести мышь за пределы области, и там отпустить кнопку. Тогда граница соответствующей “ актив ной области” останется выделенной.

Рис. 3.5. Страничка с графической картой ссылок