![[personal profile]](https://www.dreamwidth.org/img/silk/identity/user.png){kind=small}
Entry tags:
HTML: ссылки и объекты
При всей своей простоте HTML не стал бы супербомбой, если бы в нем не было гиперссылок. Это они, ссылки, одним тычком переносят читателя к другому документу на другом сервере. Ну и, само собой, картиночки. Как же не натыкать картиночек-то?
Со ссылками все просто и тупо. Вот, к примеру, страничка стандарта HTML 4.01, описывающая ссылки. Она раздается по протоколу HTTP (специальный протокол для передачи HTML) и лежит на сервере www.w3.org в каталоге /TR/1999/REC-html401-19991224/struct/ в файле links.html. Так и пишем:
http://www.w3.org/TR/1999/REC-html401-19991224/struct/links.html
В общем виде: протокол://адрес_сервера/путь_по_каталогам/файл.
Имейте в виду, что сэр рыцарь разрабатывал HTML и HTTP на взаправдашних операционных системах, и большинство серверов используют их же, а потому в именах каталогов и файлов большие и маленькие буквы считаются разными. То есть файлы links.html и Links.html могут лежать рядышком и быть разными файлами.
Приведенный выше адрес преобразовал в ссылку движок DW. В самодельном HTML придется оформить ссылку руками. Просто и тупо: <a href="здесь в кавычках пишем или вставляем из буфера обмена адрес">здесь помещаем то, щелчок по чему будет отправлять читателя по ссылке и закрываем тэг</a>. Все!
ПРИМЕР. Пишем:
Подробнее прочитать о гиперссылках можно <a href="http://www.w3.org/TR/1999/REC-html401-19991224/struct/links.html">здесь</a>.
Читатель видит:
Подробнее прочитать о гиперссылках можно здесь.
Теперь давайте все разукрасим. (Злодейский смех.)
Первым делом, нам нужен рисунок. Возьмем для примера портрет нашего любимого писателя Левдора Нихайловича Толстоевского. Он доступен по протоколу HTTP, лежит на сервере test.kem.ru в каталоге pics, имя файла tolstoyevsky.png. Следовательно, его адрес будет http://test.kem.ru/pics/tolstoyevsky.png, так ведь? Можно, конечно, нарисовать ссылку на него:
<p>...Левдор Нихайлович Толстоевский (<a href="http://test.kem.ru/pics/tolstoyevsky.png">портрет</a>)...</p>
Желающий пройдет по ссылке и увидит картинку. Но так не прикольно. А чтобы встроить картинку прямо в текст, нужен тэг <img>.
Пишем:
<img src="http://test.kem.ru/pics/tolstoyevsky.png" alt="Рожа Толстоевского">
Читатель, хочет он того или нет, видит либо картинку, либо, если хитрый, текст "Рожа Толстоевского":
Более того, вставленную таким образом картинку можно использовать вместо кликабельного текста в ссылках:
<a href="http://www.dreamwidth.org/"><img src="http://www.dreamwidth.org/img/tropo-red/dw_logo.png"></a>
Читатель увидит логотип DW, щелчок по которому приведет его на сайт DW:
Осталось отметить кой-какие детали. Во-первых, вместо абсолютных (полных, как выше) адресов в ссылки и картинки можно вставлять относительные. Представим себе, что ваш сайт лежит на сервере hosting.ru в каталоге /titan/ и состоит из трех файлов: tolstoyevsky_bio.html, tolstoyevsky.png и voyna_pontov.html. Вы, конечно, можете использовать абсолютные адреса и написать в tolstoyevsky_bio.html:
<p><img src="http://hosting.ru/titan/tolstoyevsky.png"></p>
<p>Титан русской словесности Толстоевский и его роман <a href="http://hosting.ru/titan/voyna_pontov.html">"Война понтов"</a>...
Это будет работать. Но что случится, если hosting.ru закроют и придется переезжать на coolhosting.net? Все ссылки на материалы собственного сайта придется переправлять. И так при каждом переезде.
Проще и удобнее написать так:
<p><img src="tolstoyevsky.png"></p>
<p>Титан русской словесности Толстоевский и его роман <a href="voyna_pontov.html">"Война понтов"</a>...
Такие относительные адреса будут работать где угодно (лишь бы взаимное расположение файлов оставалось прежним).
Во-вторых, внимательно посмотрите на ссылку <a href="http://www.dreamwidth.org/">. Протокол указан, сервер указан, более-менее указан каталог... и все. А файл-то, файл какой?
Это зависит от настроек сервера, но обычно в таких случаях сервер отдает файл по имени index.html. Если это не срабатывает, обратитесь в службу поддержки хостера. Там должны знать.
Домашнее задание. Теперь вы готовы сотворить мини-сайт о великом писателе Толстоевском: index.html, содержащий ссылки на биографию гения и его творение (написанной в прошлый раз главы должно хватить; положите ее туда же под именем voyna_pontov.html) и саму краткую биографию, tolstoyevsky_bio.html. Все три можно украсить портретом титана и прочими крайне необходимыми, по мнению ведущих веб-дизайнеров, картинками: розочками, сердечками, схемами разделки тушки тихоокеанской сельди... в общем, дерзайте.
Со ссылками все просто и тупо. Вот, к примеру, страничка стандарта HTML 4.01, описывающая ссылки. Она раздается по протоколу HTTP (специальный протокол для передачи HTML) и лежит на сервере www.w3.org в каталоге /TR/1999/REC-html401-19991224/struct/ в файле links.html. Так и пишем:
http://www.w3.org/TR/1999/REC-html401-19991224/struct/links.html
В общем виде: протокол://адрес_сервера/путь_по_каталогам/файл.
Имейте в виду, что сэр рыцарь разрабатывал HTML и HTTP на взаправдашних операционных системах, и большинство серверов используют их же, а потому в именах каталогов и файлов большие и маленькие буквы считаются разными. То есть файлы links.html и Links.html могут лежать рядышком и быть разными файлами.
Приведенный выше адрес преобразовал в ссылку движок DW. В самодельном HTML придется оформить ссылку руками. Просто и тупо: <a href="здесь в кавычках пишем или вставляем из буфера обмена адрес">здесь помещаем то, щелчок по чему будет отправлять читателя по ссылке и закрываем тэг</a>. Все!
ПРИМЕР. Пишем:
Подробнее прочитать о гиперссылках можно <a href="http://www.w3.org/TR/1999/REC-html401-19991224/struct/links.html">здесь</a>.
Читатель видит:
Подробнее прочитать о гиперссылках можно здесь.
Теперь давайте все разукрасим. (Злодейский смех.)
Первым делом, нам нужен рисунок. Возьмем для примера портрет нашего любимого писателя Левдора Нихайловича Толстоевского. Он доступен по протоколу HTTP, лежит на сервере test.kem.ru в каталоге pics, имя файла tolstoyevsky.png. Следовательно, его адрес будет http://test.kem.ru/pics/tolstoyevsky.png, так ведь? Можно, конечно, нарисовать ссылку на него:
<p>...Левдор Нихайлович Толстоевский (<a href="http://test.kem.ru/pics/tolstoyevsky.png">портрет</a>)...</p>
Желающий пройдет по ссылке и увидит картинку. Но так не прикольно. А чтобы встроить картинку прямо в текст, нужен тэг <img>.
Пишем:
<img src="http://test.kem.ru/pics/tolstoyevsky.png" alt="Рожа Толстоевского">
Читатель, хочет он того или нет, видит либо картинку, либо, если хитрый, текст "Рожа Толстоевского":
Более того, вставленную таким образом картинку можно использовать вместо кликабельного текста в ссылках:
<a href="http://www.dreamwidth.org/"><img src="http://www.dreamwidth.org/img/tropo-red/dw_logo.png"></a>
Читатель увидит логотип DW, щелчок по которому приведет его на сайт DW:
Осталось отметить кой-какие детали. Во-первых, вместо абсолютных (полных, как выше) адресов в ссылки и картинки можно вставлять относительные. Представим себе, что ваш сайт лежит на сервере hosting.ru в каталоге /titan/ и состоит из трех файлов: tolstoyevsky_bio.html, tolstoyevsky.png и voyna_pontov.html. Вы, конечно, можете использовать абсолютные адреса и написать в tolstoyevsky_bio.html:
<p><img src="http://hosting.ru/titan/tolstoyevsky.png"></p>
<p>Титан русской словесности Толстоевский и его роман <a href="http://hosting.ru/titan/voyna_pontov.html">"Война понтов"</a>...
Это будет работать. Но что случится, если hosting.ru закроют и придется переезжать на coolhosting.net? Все ссылки на материалы собственного сайта придется переправлять. И так при каждом переезде.
Проще и удобнее написать так:
<p><img src="tolstoyevsky.png"></p>
<p>Титан русской словесности Толстоевский и его роман <a href="voyna_pontov.html">"Война понтов"</a>...
Такие относительные адреса будут работать где угодно (лишь бы взаимное расположение файлов оставалось прежним).
Во-вторых, внимательно посмотрите на ссылку <a href="http://www.dreamwidth.org/">. Протокол указан, сервер указан, более-менее указан каталог... и все. А файл-то, файл какой?
Это зависит от настроек сервера, но обычно в таких случаях сервер отдает файл по имени index.html. Если это не срабатывает, обратитесь в службу поддержки хостера. Там должны знать.
Домашнее задание. Теперь вы готовы сотворить мини-сайт о великом писателе Толстоевском: index.html, содержащий ссылки на биографию гения и его творение (написанной в прошлый раз главы должно хватить; положите ее туда же под именем voyna_pontov.html) и саму краткую биографию, tolstoyevsky_bio.html. Все три можно украсить портретом титана и прочими крайне необходимыми, по мнению ведущих веб-дизайнеров, картинками: розочками, сердечками, схемами разделки тушки тихоокеанской сельди... в общем, дерзайте.