Готовим материал для печати.
Если Вы решились выйти в интернет, то, наверное, у Вас имеется какой-то материал, который может, по Вашему мнению, заинтересовать других.
Я бы предложилa начать с текстового документа. Почему текстового, когда многие форматы файлов можно открыть с помощью браузера? В основном, просто потому, что:
а) мы хотим видеть нашу страницу при указании адреса нашего сайта (http://my.cat.net), а не при указании её физического адреса (http://my.cat.net/имя_файла.расширение_файла);
б) мы пока не ставим перед собой задачи создания динамического, к примеру, PHP сайта (хотя, в большинстве случаев это и более удобно), но любые динамические страницы могут стать препятствием в работе с поисковиками, а это как раз следующий пункт;
в) мы хотим увидеть (пусть и не сразу, а через некоторое время) наш сайт прописанным в поисковиках, а для них нет ничего лучше, чем текстовый файл, так как читать и, если угодно, "красть" и сохранять нашу ценную информацию – это единственное, что они умеют.
Таким образом, именно текстовый формат соответствует задачам большинства людей, которые публикуют свои материалы в сети.
Итак, если Вы относитесь к числу таких людей и у Вас есть файл с именем, к примеру aboutMyCat.txt, то, для начала, просто переименуйте его в index.html (расширение - то есть .html - нужно изменить обязательно, возможно, для этого Вам придётся открыть любую папку -> свойства папки -> вид -> не показывать расширения для известных типов файлов и убрать галку напротив данного пункта).
Если Вы пользуетесь относительно новым текстовым процессором типа MS Word или OpenOffice и Ваш документ имеет вид aboutMyDog.doc или что-то в этом роде, то у Вас есть два варианта:
a) если Вы ленивы, то при сохранении файла в виде html вы получите относительно приличного вида форматированный документ, уже готовый к публикации, и всё, что не касается непосредственно публикации и популяризации документа в сети, Вы можете, соответственно, опустить;
б) Вы не ленивы? Тогда сохраняйте свой .doc как .txt и далее меняйте его расширение на .html, а название на index, и, поверьте, Ваши труды не пропадут даром, дальнейшая пара шагов позволит не только сократить объём файла, но и сделать его более доступным для поисковиков.
Итак, ещё раз проверяем наш файл на наличие орфографических ошибок и... Чего же мы добились?! Наш красивый документ, который имел вид примерно как на предыдущем рисунке, вдруг вытянулся в одну строку. А дело в том, что, по умолчанию, любое количество идущих подряд в коде пробелов отражается на веб-странице как один. Тут-то нам на помощь и придёт Язык Разметки Гипертекста (HTML). Весь HTML состоит из отдельных инструкций (тегов), заключённых в угловые скобки (<тег>), а так как почти все они парные (контейнерные, могут содержать другие теги), то получатся следующее: <тег>и, возможно, что-то между</тег>. Все html-документы должны начинаться с инструкции <html>. За открывающим тегом документ делится на заголовочную часть (HEAD), где мы разместим сам заголовок (TITLE) и некоторое количество служебных неотображаемых браузерами тегов (META), и непосредственно тело (BODY), куда пойдёт наш текст (плюс дополнительные теги для его форматирования). Заканчиваем документ соответствующим закрывающим тегом - </html>. Итак, перепечатывание вручную в данном случае опускаем, воспользуемся копированием (клавиатурное сокращение ctrl+c) с последующей вставкой (ctrl+v), т. к. любой html-редактор первично форматированный документ нам предоставит.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Untitled Document</title> </head> <body> Стихотворение о моей любимой кошке. Моя кошка Влезла на окошко, Посидела там немножко И спрыгнула с окошка. </body> </html>
1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> - объявляем тип документа, данный тип на данный момент многие считают предпочтительным из-за его гибкости в работе с различными версиями различных браузеров, XHTML (Расширенный язык разметки гипертекста) (более подробно см. сайт W3C, http://www.w3.org соответственно).
2. <html xmlns="http://www.w3.org/1999/xhtml"> - открываем документ и указываем адрес спецификации языка.
3. <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" /> - объявляем, что документ содержит html-форматированный текст в русскоязычной кодировке.
4. <title>Untitled Document</title> - вместо Untitled Document ставим заголовок нашего документа, к примеру у меня будет Стихотворение о моей любимой кошке.
5. Добавляем тег мета, содержащий краткое описание документа: <META NAME="description" CONTENT="стихотворение о моей любимой кошке, написанное мною прошлой весною">.
6. Смотрим на результат:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Стихотворение о моей любимой кошке.</title>
<META NAME="description" CONTENT="стихотворение о моей любимой кошке, написанное мною прошлой весною">
</head> <body> Стихотворение о моей любимой кошке. Моя кошка Влезла на окошко, Посидела там немножко И спрыгнула с окошка. </body> </html>
В браузере, казалось бы, ничего не изменилось. Только в самой верхней части экрана (перед коммерческим названием браузера, в моём случае это Mozilla Firefox) появилось название нашего документа (содержание тега TITLE).
Наконец-то мы можем приступить непосредственно к форматированию нашего текста! Конечно, мы могли бы получить желаемый результат просто применив тег <pre> </pre>, который определяет блок предварительно форматированного текста. Такой текст отображается обычно моноширинным шрифтом и со всеми пробелами между словами:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Стихотворение о моей любимой кошке.</title>
<META NAME="description" CONTENT="стихотворение о моей любимой кошке, написанное мною прошлой весною">
</head> <body> <pre> Стихотворение о моей любимой кошке. Моя кошка Влезла на окошко, Посидела там немножко И спрыгнула с окошка. </pre> </body> </html>
Но этот тег окажется лишним при работе с CSS (Каскадные Таблицы Стилей) и применении для различных тегов атрибута style, поэтому мы пойдём другим путём, а именно: заглавие нашего документа поместим в тег <h1></h1> (Header, заголовок, бывают от h1 до h6, чем больше цифра, тем мельче, разные браузеры отображают заголовки шрифтом разного размера, но с этим легко справиться с помощью CSS, чрезвычайно полезны при работе с поисковиками, для последних значимость заголовка убывает вместе с его размером) и остальную часть документа поместим между тегами <p></p>, определяющими параграф с предварительным добавлением пустой строки, с добавлением атрибута style="white-space: pre", что позволит нам сохранить наши пробелы.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Стихотворение о моей любимой кошке.</title>
<META NAME="description" CONTENT="стихотворение о моей любимой кошке, написанное мною прошлой весною">
</head> <body> <h1>Стихотворение о моей любимой кошке.</h1> <p style="white-space: pre"> Моя кошка Влезла на окошко, Посидела там немножко И спрыгнула с окошка. </p> </body> </html>
Кстати, для перевода строки мы могли бы воспользоваться тегом <br /> (break, перевод строки), который в классическом HTML имеет вид <br> и который мы, в соответствии с типом нашего документа, делаем самозакрывающимся с помощью косой черты (slash). Но представьте себе, что мы хотим поместить на страничку не стихотворение, а поэму примерно из ста строк. Довольно утомительно будет запечатывать тег <br>, а ещё хуже с отступами от края страницы! Сколько бы мы ни жали пробел, в .html все они превратятся в один. Нам пришлось бы использовать непрерывный пробел, который относится к группе специальных символов и имеет вид . И наш документ приобрёл бы в режиме редактирования примерно следующий вид:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Стихотворение о моей любимой кошке.</title>
<META NAME="description" CONTENT="стихотворение о моей любимой кошке, написанное мною прошлой весною">
</head> <body> <h1>Стихотворение о моей любимой кошке.</h1> <p> Моя кошка<br /> Влезла на окошко,<br /> Посидела там немножко<br /> И спрыгнула с окошка. </p> </body> </html>
В любом из последних трёх случаев мы получим приблизительно одинаковый результат. Да, и немного о спецсимволах. Дело в том, что браузер воспринимает некоторые символы в качестве программного кода, например, <, а мы непременно хотим видеть его на своей страничке! Для этого эти символы и подменяют буквенными обозначениями стоящими сразу за знаком амперсанд (&) с точкой с запятой в конце (кстати, каждый из них имеет ещё и цифровой аналог вида —). Пытаться запомнить последовательности не стоит, т. к. любой редактор HTML предоставит Вам меню, из которого можно будет выбрать нужный символ.
И, не смотря на всё сказанное выше, обратите своё внимание на тег перевода строки. Это первый непарный тег, который нам встретился на данный момент. Теги, в основном, парные (контейнерные). Другие непарные теги, которыми мы не преминем воспользоваться в ближайшее время, - <img /> (image, для вставки картинок) и <hr /> (horizontal line, для вставки горизонтальной разделительной линии).
А тем временем, мы имеем уже какой-то материал для публикации!
Осталась только одна важная деталь. Дело в том, что само название html - язык разметки гипертекста - предполагает наличие этого самого гипертекста, а гипертекстовый документ - это документ, что содержит ссылки, которые позволяют быстро перемещаться к другим документам. Так что давайте создадим для начала хотя бы одну такую ссылку. Допустим, что у нас есть документ mycats_bio.html, содержащий биографию кошки, о которой и написано стихотворение. В конце нашего документа перед тегом </body> поставим пару символов перевода строки (для визуального отделения ссылки от текста стихотворения) и добавим тег <a></a>. Буква a здесь от слова Anchor - указатель ссылки - то, что стоит между открывающим и закрывающим тегами (слово, группа слов или изображение, которые мы видим на экране), единственный параметр тега, который нас сейчас интересует - href, гипертекстовая ссылка, имеет значение URL документа, который мы хотим открыть в случае перехода по ссылке.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Стихотворение о моей любимой кошке.</title>
<META NAME="description" CONTENT="стихотворение о моей любимой кошке, написанное мною прошлой весною">
</head> <body> <h1>Стихотворение о моей любимой кошке.</h1> <p style="white-space: pre"> Моя кошка Влезла на окошко, Посидела там немножко И спрыгнула с окошка. </p> <br /> <br /> <a href="mycats_bio.html">mycats_bio.html</a> </body> </html>
А теперь - к менее интересным, но не менее важным моментам.