Самый главный тег и параметры тегов
Но что, все это было прекрасно, но самого важного я вам пока-что не сказал. Если вы помните, в первом уроке я говорил, чем отличается гипертекст от простого текста? Правильно, наличием ссылок. Чего стоят все эти возможности разукрашивания и форматирования, если пользователь будет прикован к единственной странице и никуда не сможет с нее уйти?
Необходима возможность создавать в документе ссылки. Для пометки части текста как ссылки используется тег, имя которого состоит из одной единственной буквы алфавита - первой. Это, как вы уже догадались - буква a (латинская). Имя этого тега происходит от английского слова anchor - якорь или связь.
В примере sample2-7 тегом <a> обрамлено слово мир, вот так:
<a>мир</a>
Это превращает слово мир в ссылку на другую страницу... Упс!
Видите, что-то не так? Слово мир почему-то никуда не ведет, хотя мы и пометили его тегом <a>. Почему?
Догадливые читатели уже поняли, что слово мир никуда не ведет потому, что мы не указали, куда оно должно вести! :-)
А еще более догадливые читатели догадались, что если бы мы и захотели указать, куда вести, то не смогли бы, так как не знаем как. :-))
Ответ на последний вопрос раскрывает перед нами целый пласт новых знаний!
Помимо того, что некоторые части текста могут быть помечены теми или иными тегами, что уже само по себе будет о чем-то говорить, еще есть возможность указать по этим тегам дополнительные сведения. В частности, по тегу <a> можно указать, куда он будет вести.
Для этого используются так называемые параметры тегов.
Параметры тега всегда указыватся в его открытии, между именем тега и закрывающей угловой скобкой, вот здесь
<a ...>
Указание параметра выглядит как равенство. Пишется что-то = чему-то. Вот так:
<a href="/sample2-8">
Что-то, стоящее слева от знака равенства - это имя параметра. У каждого тега есть свои параметры и только их имена можно использовать. Чего-то, стоящее справа от знака равенства - это значение параметра.
Значение параметра это и есть та дополнительная информация, которая указывается по тегу. А имя параметра - это вид этой дополнительной информации.
В нашем примере по тегу <a> указывается дополнительная информация вида href, что происходит от слов hyper reference, то есть, гиперссылка. Href - это имя параметра. Значение этого параметра - это указанное в двойных кавычках имя файла. Обычно это файл HTML. Если файл лежит в той же папке, что и тот файл, в котором указан тег <a>, то в значении ставится просто имя файла. Если же файлы лежат в разных папках, то надо указать еще и путь к нему.
Исправленый пример со ссылкой находится в файле sample2-8. В этом примере слово мир вывелось другим цветом и подчеркнуто, как и положено для ссылки. Кроме того, указатель мыши над этим словом превращается в палец. А если в слово ткнуть мышью, то... :-)
Как вставлять картинки
Любой сайт был бы невзрачен, если бы на нем не использовались картинки. Как же их вставлять?
Картинка обычно хранится в отдельном файле и лежит в другой папке, чем сам документ HTML, в котором она отображается. Файлы с картинками имеют расширения .gif и .jpeg, а также некоторые другие. Чтобы использовать картинку в документе, ее нужно сначала нарисовать в графическом редакторе (либо скачать готовую откуда-нибудь из интернета) и положить неподалеку от файла HTML. Потом в документе надо воспользоваться тегом <img> (image, картинка). Тег <img> не нуждается в закрывании. У него есть параметр src, в значении которого надо указать путь и имя файла с картинкой.
Таким образом, чтобы вставить картинку земли в примере sample2-9, был использолван код
<img src="/images/earth.gif">
Сама картинка лежит в папке images, и на нее можно дать простую ссылку при помощи кода
<a href="/images/earth.gif">простую ссылку</a>
Понимаете? В чем разница и в чем общее, понимаете?
Когда человек открывает ссылку на файл HTML со вставленной картинкой, то происходит следующее:
- Браузер запрашивает у сервера файл HTML
- Сервер передает его браузеру
- Браузер видит, что в файле HTML присутствует тег <img> и считывает его параметр src, откуда он получает путь к картинке
- Браузер заправшивает у сервера файл с картинкой
- Сервер передает его браузеру
- Браузер врисовывает картинку вместо тега <img>
Когда человек открывает ссылку на сам файл с картинкой, то происходит следующее:
- Браузер заправшивает у сервера файл с картинкой
- Сервер передает его браузеру
- Браузер врисовывает картинку в пустое окно
Понятно? В первом случае происходит два запроса к серверу, а во втором - один!
Тег META
Есть еще один немаловажный тег, называется он <meta> и должен располагаться в заголовке (внутри тега head).
Назначение этого тега можно было бы охарактеризвать как "разное". То есть, в параметрах этого тега указывается всякая разная всячина, которая не вошла в другие теги. Поскольку тег располагается в заголовке, то относится это всякое разное к информации ОБ документе.
Сейчас для нас важно одно: с помощью тега <meta> можно указывать, в какой кодировке подготовлен документ. Если вы знаете, исторически сложилось так, что для кодировки русских букв используюся сразу несколько систем кодирования (латинских - только одна). В этой чехарде нет ничего хорошего, но с ней приходится считаться.
Русские буквы кодируются по-разному в операционных системах ДОС, Unix и Windows. Чтобы изобразить русские буквы правильно, браузер должен знать, в какой из кодировок они записаны при программировании. Один из вариантов - поручить пользователю самому перебирать кодировки, пока не покажется правильная. Другой вариант, более правильный, разместить указание об этом в теге <meta>.
Итак, скажу просто, что чтобы указать, что документ подготовлен в кодировке системы Windows, в нем надо разместить следующую строку:
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
Услуги хостинга
Ну все. Теперь мы знаем все необходимое, чтобы создать свою первую страничку. За исключением одного - как разместить ее в интернете?
Когда человек или фирма разрешает другим фирмам или людям класть на свой компьютер их странички, то говорят, что этот человек или фирма оказывают услуги хостинга (от английского слова host - содержать).
Фирм, оказывающих услуги хостинга - очень много, можно поискать их через Яндекс, а можно воспользоватьсянашими услугами. Есть среди них и такие, которые оказывают эту услугу бесплатно, взамен на право размещать на вашей страничке рекламу. Например, Narod.ru.
Заядя на этот сайт, любой человек может зарегистрировать новое имя для сайта, после чего получает место на диске, куда он может закачивать свои файлы HTML. Остальные люди (весь мир) имеют возможность просматривать эти файлы, зная их адреса URL.
Домашнее задание
Теперь приступим к домашнему заданию.
Оно большое и ужасно сложное! Шутка! :-))
Первое.
Найдите себе фирму, предлагающаую хостинг. Можно наш, можно другой платный, можно - бесплатный. Можно народ-ру, можно - другой. Заведите себе на нем место для сайта.
Второе.
Подготовте файл с именем index, в котором разместите страницу со следующими характеристиками:
- У страницы должен быть тег <html>, а также заголовок <head>, тег <title> и тег <body>. Кроме того, в заголовке должен присутствовать тег <meta> с правильно указанной кодировкой русского текста.
- Страница должна представлять собой рассказ о воображаемой фирме "Рога и копыта", состоящий из трех глав (тег <h1>).
- В каждой главе должно быть несколько абзацев (тег <p>) из нескольких предложений.
- В тексте должны быть использованы теги форматирования текста жирным, курсивом и подчеркиванием, как логические, так и физические.
- Заднего фона быть не должно. ;-)
- На странице, в тексте, должно быть приведено изображение Земли и Сатурна из данного урока.
- Со страницы должны быть сделаны гиперссылки на сайт Яндекса, а также на сайт бесплатного обучения HTML. Содержимое тегов <a> должно быть при этом непустым.
