Текст книги "Готовимся к пенсии. Осваиваем Интернет"

А нужен ли вообще человеку сайт? Раньше, несколько лет назад, я уверяла, что да! Нужен! Каждому человеку по сайту! Сейчас у меня другое мнение. Ведь на просторах Интернета столько сайтов! И не все они хороши, очень много мусора. Но если у вас есть что сказать миру, есть чем поделиться, тогда и флаг вам в руки!

Но попробовать, почему бы и нет? Может, это дело вас так же увлечет, как и меня? Может, это вообще повернет вашу жизнь в другую сторону, даст вдохновение, наполнит смыслом жизнь? Никто не знает, на что он способен. Вот, скажи мне кто раньше, что я смогу добиться того, чего добилась сейчас, ни за что бы не поверила. Сказала бы просто – брехня! Это под силу только очень умному, талантливому человеку, с тремя высшими образованиями и, естественно, мужского пола!

Так что не дрейфьте, а просто начните. Я же буду все объяснять по шагам, просто и доступно.

Как сказал один хороший человек: "Научить нельзя. Научиться – можно!" Нужно-то всего ничего – сделать первый шаг. А информация, приведенная в приложении 1, в этом вам поможет. И все у вас получится!

Заработай деньги

Если вам не хватает денег (а кому их когда-то хватало?), можно попытаться заработать деньги с помощью Интернета. Да-да, это не сказки. Хотя лохотронов тут достаточно, главное – знать подводные камни и не верить в сомнительные заработки.

Не верьте также и тому, кто говорит, что деньги можно тут грести лопатой. Был бы такой способ – лопат бы не хватало, все бы там и околачивались, у этого корыта. Тут все как в реальной жизни. Единственное отличие: нет дискриминации ни по возрасту, ни по полу, ни по вероисповеданию, ни по физическим возможностям. Вот последнее мне больше всего нравится. Много в нашей стране инвалидов, на работу их не берут, но в Интернете свои законы. Голова есть, компьютер есть – работай. Правда, и скидок не делают. Но, может, это и к лучшему? На равных – значит на равных.

Опять же начну с собственного примера. Ведь именно Интернет не даст мне стать нищенкой, именно в Интернете я нашла свою, ни от кого не зависящую нишу, именно в Интернете я сама себе хозяйка, и именно Интернет – мой источник дохода. Да, скоро мне на пенсию, но я этой пенсии (настолько она нищенская) не боюсь. И мне наплевать, повысит государство эту пенсию на сто рублей или отберет себе половину – пусть это будет на его, государственной, совести.

А зарабатываю я рекламой на своих сайтах. Размещаю на сайте скрипт, деньги сами капают. И рекламодателям хорошо – с помощью моих сайтов они получают себе новых посетителей, и мне хорошо. Короче, всем хорошо. Даже государству хорошо – отчисляю ему налог от своих заработков.

Но, чтобы заработать на рекламе, нужно иметь свой сайт. Если его нет – можно заработать и на блогах, если там разрешено. Опять же, можно что-то рекламировать. Не обязательно чужое. Может быть, вы умеете что-то делать, что не умеют другие? Или готовы оказывать какие-то услуги? Почему бы это не разрекламировать?

Возможностей много, главное – начать действовать, и немедля! Не сиди, сложа руки. Ведь прожита немалая часть жизни, не поверю, что вы ничему не научились за это время. Да и дело это так затягивает… казино рядом не стояло! И пусть деньги на первых порах будут небольшими. Это только у бандитов они бывают сразу шальными, да и то, если милиция (вернее, полиция) не остановит.

Главное – у нас есть время. И голова на плечах. И мышка компьютерная в руках. Так что же медлить? Вперед! Лопатой обзавестись не забудьте! А информация, приведенная в приложении 2, в этом вам поможет.

И – удачи!

Приложение 1. Краткая инструкция по созданию сайта своими руками

Какие бывают сайты?

Сайт сайту рознь. И будет нелишним узнать, чем же они отличаются друг от друга.

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

Если вы занимаетесь какой-то деятельностью, то такой сайт вполне вам подходит. Как говорится, дешево и сердито. Пример такого сайта приведен на рис. П1.1.

В отличие от сайта-визитки, корпоративный сайт состоит, как правило, из большого количества страниц. Здесь предоставлена полная информация о компании, ее новостях, объявления о различных акциях и событиях компании. Подробно рассказывается о сфере деятельности компании, о выпускаемой продукции. Выглядит такой сайт представительно и солидно. Все работает на имидж компании. Вот пример такого сайта (рис. П1.2).

Как и понятно из названия, сайт предназначен для продажи услуг или товаров. Он содержит каталог товаров, их цены, подробные характеристики и описания товаров, страницу заказов, а также корзину для товаров и информацию о способах оплаты и доставки. Отличия такого сайта: удобная навигация, деловой дизайн и хорошо продуманная система по поиску товаров. Примером может служить сайт по продаже ноутбуков (рис. П1.3).

Рис. П1.1. Сайт-визитка

Рис. П1.2. Корпоративный сайт

Рис. П1.3. Интернет-магазин

Главной задачей любого информационного сайта является предоставление полной и, что немаловажно, регулярно обновляемой информации. К ним относятся, например, правительственные, образовательные, новостные сайты.

Информационные сайты отличаются большим объемом размещенных на них материалов, включая графику, а также мультимедиа. Примером может служить сайт http://www.gazeta.ru (рис. П1.4).

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

Рис. П1.4. Информационный сайт

Создаем свой шаблон

Пояснение

Не хочу грузить вас специальной терминологией, но считаю своим долгом пояснить, что то, в чем мы сейчас начинаем разбираться, называется основами языка гипертекстовой разметки, или HTML (HyperText Markup Language), если по-английски. Вот с помощью тегов – команд этого языка – и осуществляется создание интернет-страничек, или, если попросту, – веб-дизайн. А гипертекст – это еще проще. Именно так и называется способ организации Интернета – система взаимных ссылок, позволяющих связывать воедино тексты, находящиеся на различных компьютерах Всемирной паутины.

Прежде чем делать сайты, нужно решить, в какой программе мы их будем создавать. Мне известны три способа, все они имеют как преимущества, так и недостатки.

✓ Создание страничек с помощью Блокнота (Notepad) – встроенной программы Windows. В этом Блокноте вы будете писать свои веб-странички вручную, расписывая все теги самостоятельно. Это самый трудоемкий и отнимающий уйму времени способ. Но, овладев им, вам станет понятной вся кухня этой увлекательной профессии – сайтостроения, вы сможете спокойно создавать такие странички, какие захотите, какие подскажет вам ваша фантазия. Это внутренний мир без границ.

✓ Создание страничек в специализированных HTML-редакторах – например, в программе Notepad++, которую можно скачать из Интернета. В принципе, это хороший помощник, намного ускоряющий процесс работы над страничкой. Но только в том случае, если вы уже знакомы со всеми понятиями и определениями языка разметки HTML. Так что, все-таки, я бы советовала начать с простого текстового редактора.

✓ Создание страничек в специальных программах, для этого предназначенных – например, в Adobe Dreamweaver. С помощью таких мощных программ, совершенно не зная ни программирования, ни одного символа или закорючки HTML, вы сможете легко и просто, буквально за полчаса, создать приемлемую страничку, и она будет прекрасно функционировать. Единственно – вы так и не сможете понять, как она действует, и если случится какой-то сбой, найти ошибку, не понимая основ HTML, вам будет очень и очень нелегко. Кроме того, такие программы имеют весьма ограниченные функции, и если вдруг вам захочется ввести в свою страничку какие-то новшества, вам придется либо устанавливать новую версию программы, либо переделывать весь сайт заново, либо обращаться к толковому программисту.

А теперь приступим к делу и запустим. Найдем нашу программу Блокнот (Notepad). В нижнем левом углу монитора отыскиваем кнопку Пуск и выполняем команду: Пуск | Все программы | Стандартные | Блокнот – вот так, как показано на рис. П1.5.

И вот он – божественный прямоугольник с пятью кнопками наверху: Файл, Правка, Формат, Вид и Справка. Впрочем, за все время работы с этим редактором мне вполне хватало и одной кнопки Файл, да и то для того, чтобы просто сохранить результаты своего труда (рис. П1.6). Вот в этой программе и начнем работать.

Конечно, если сравнить этот простенький блокнотик хотя бы с такой навороченной программой, как Adobe Dreamweaver, по красоте и дизайну наш блокнотик вряд ли может с ней соперничать, но по результатам мастерства… я бы не торопилась делать выводы.

Если выбрать команду меню Формат | Шрифт, откроется диалоговое окно Шрифт, где вы сможете выбрать тот шрифт, который вам понравится, с каким удобней работать. И обязательно отметьте галочкой опцию Формат | Перенос по словам – это необходимо, чтобы текст помещался по ширине окна, а не разъезжался на несколько экранов вширь.

Рис. П1.5. Запуск Блокнота

Рис. П1.6. Блокнот

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

✓ Никогда не пишите названия файлов кириллицей – только на латинице. Файл, названный индекс. html, не сможет интерпретировать ни один браузер. Следует назвать его index.html.

✓ Желательно пользоваться буквами нижнего регистра. Лучше foto.jpg, чем FOTO.JPG. Впрочем, страничка откроется правильно в любом случае, просто вы сами можете запутаться. Однажды я никак не могла понять, почему страница не открывается в Интернете. Когда файлов немного, ошибку найти нетрудно, но когда файлов десятки, а может, и сотни, легко не заметить, что в одной из ссылок указан файл Fotomenu.html вместо fotomenu.html.

✓ Никогда не забывайте закрывать парные кавычки или теги. Забытая кавычка может надолго лишить вас покоя. Так что, будьте бдительны! Строка <img src="mycat> ни за что не сработает, поскольку в ней не хватает парной закрывающей кавычки: <img src="mycat">.

✓ Не допускаются пробелы между открывающей угловой скобкой и дескриптором. Запись: < img src="mycat"> недопустима, поскольку между < и img вставлен пробел. А вот перед закрывающей скобкой пробел допустим: <img src="mycat"> – вполне возможная запись. Однако, чтобы точно не ошибаться, старайтесь не делать лишних пробелов. Впрочем, вокруг знака равенства = пробелы допустимы с обеих сторон. Так что <img src = «mycat»> тоже прекрасно сработает.

Рекомендую вам, чтобы не путаться и не усложнять себе жизнь, старайтесь придерживаться этих несложных правил. Итак, повторим еще раз:

✓ мы никогда, даже под страхом смерти, не будем называть файлы русскими именами;

✓ будем стараться писать имена файлов в нижнем регистре;

✓ не будем забывать (хотя кто застрахован от ошибок?) закрывать парные теги и кавычки;

✓ и, наконец, не будем ставить без крайней необходимости пробелов.

Все. Теперь приступим к созданию шаблона наших страничек. Пишем в Блокноте текст, показанный на рис. П1.7.

Рис. П1.7. Наш шаблон

Далее весь код будет приводиться в листингах. Поэтому то, что запечатлено на рис. П1.7, я перепишу в листинг П1.1.

Написали? Просто, правда? Это будет наш шаблон. Давайте и сохраним его под именем shablon.html.

Внимание!

Все рассмотренные здесь листинги и соответствующие им HTML-файлы выложены в составе электронного архива на FTP-сервере издательства (см. приложение 3). Скачать архив можно по адресу: ftp://85.249.45.166/9785977506601.zip. Ссылка эта доступна и со страницы книги на сайте www.bhv.ru.

Итак, посмотрим еще раз, уже повнимательнее, на наш шаблон. С первого же взгляда видно, что практически все написанные теги – парные!

✓ <HTML> имеет пару </HTML>

✓ <TITLE> имеет пару </TITLE>

✓ <HEAD> имеет пару </HEAD>

✓ <BODY> имеет пару </BODY>

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

✓ Теги <HTML></HTML> – это просто границы нашего документа. Благодаря этим тегам браузер распознает начало и конец странички, расположенной между ними. И выводит его содержание на всеобщее обозрение.

✓ Теги <HEAD></HEAD> – это заголовок документа (не путайте с названием!!!). Информация, находящаяся между тегами, не видна на страничке, она необходима тем программам, которые ее могут просматривать. Заголовок не является обязательным элементом, однако как у каждого документа, у странички тоже должен быть заголовок. Кроме того, в заголовок входят такие полезные элементы, как стиль документа, ключевые слова, да и много полезной информации, без которой потом трудно будет обойтись.

✓ Между тегами <TITLE></TITLE> мы будем писать название нашей странички. И это название браузер выведет в самой верхней строке своего окна. Не делайте название слишком длинным – достаточно одной строчки. А то и одного слова. Советую вам не использовать общие малозначащие названия – ведь ваша страничка уникальна, правда? Вместо безликой «Моя домашняя страничка» дайте то имя, ради которого вы и решили явить себя миру.

Скажем, если мы напишем так: <TITLE>Пенсионерка Ру</TITLE>, то на сайте http://www.pensionerka.ru это название появится в заголовке (верхней строчке) браузера (рис. П1.8).

✓ Теги <BODY></BODY> – это и есть тело документа. Все, что мы запихнем между этими тегами: все наши таланты, работы и творения, фотографии, рисунки, фильмы, музыку и Бог знает что вы еще там напридумываете, – все это отобразится на вашей страничке. А от того, насколько она окажется содержательной, интересной, красивой и уникальной, будет зависеть и популярность вашего сайта.

Ну, теперь можно и прерваться, и посмотреть, что же у нас там получилось, в нашем первом файле shablon.html. Так… и что мы видим? Правильно… ничего. А чего показывать, если мы туда ничего своего не внесли? Что ж, попробуем исправить положение.

Пояснение

Предложила посмотреть, что показывает файл shablon.html, а как это сделать не объяснила… Все очень просто. Щелкните двойным щелчком по этому файлу в папке, куда он сохранен, и он откроется в браузере, принятом в системе по умолчанию.

Рис. П1.8. В заголовке браузера – название странички

Надеюсь, у вас есть какая-нибудь ваша фотография? Все равно какая, лишь бы была! Надеюсь, ее файл назван латинскими буквами? И в нижнем регистре? И, желательно, в формате JPG? Типа так: myfoto.jpg.

Примечание

Не обижайтесь, но некоторые моменты я буду повторять по сто раз, потому как если бы мне кто раньше так повторял… мне не пришлось бы обливаться слезами, лупить ни в чем не повинный компьютер и переделывать заново свои работы. Тогда начнем…

Да! Кстати… а как же открыть нам свой файл в блокноте, если он по двойному щелчку сразу открывается в окне браузера? Привожу два различных способа.

✓ Открыть опять Блокнот – для особо забывчивых: Пуск | Все программы | Стандартные | Блокнот. Хотя давно пора выставить его значок на рабочий стол… Открыли? Ну, и оттуда Файл | Открыть… достать наш родной, единственный и неповторимый shablon.html. Получилось? Ну и славненько…

✓ Если у вас этот файл уже открыт браузером, щелкните правой кнопкой мыши по экрану и в появившемся меню выберите Просмотр HTML-кода (или Просмотр кода страницы – в зависимости от браузера) – результат будет тот же. Наш файл сам откроется в Блокноте!

Итак, хватит болтовни, посмотрим что у нас там осталось с прошлого раза (листинг П1.2).

Вы уже выучили наизусть этот наш шаблон как «Отче наш»? Нет? Странно… мы им будем пользоваться постоянно. Хотя, скажу вам по секрету, можно писать эти теги и строчными буквами, браузеру на это начхать. Точно так же откроет он и содержимое такого файла (листинг П1.3).

Ну, а теперь запомнили? Еще повторить?

Ладно… в общем, объясняю: я буду писать буквы всех тегов прописными (заглавными) буквами исключительно из-за того, чтобы вам легче было отличать изменяемую часть от постоянной. Договорились? А вы можете писать как хотите. Как удобней.

Итак, изменим содержимое нашего шаблона, вставив туда немного текста (листинг П1.4).

Ну и сохраним этот файл, например, под именем, соответствующим номеру листинга: listing_1.4.html. Открываем файл и видим следующую картину (рис. П1.9).

Рис. П1.9. Файл listing_1.4.html в окне браузера

Итак, в верхней строке браузера у нас отобразилось название странички: Моя Первая Страничка, а в самом окне – текст, который мы ввели между тегами <BODY> и </BODY>.

Ну вот, уже кое-что становится понятно. А раз так – идем дальше!

Форматируем содержимое странички

Для того чтобы текст на наших страничках смотрелся красиво, его необходимо отформатировать. Для этого есть несколько тегов, вот ими сейчас и займемся.

Обычно в каждом тексте имеются заголовки разных уровней. Самый крупный заголовок называется заголовком 1-го уровня, самый маленький – 6-го. Тегами заголовков служат парные теги <Hn> и </Hn>, где n – номер уровня заголовка. Вернемся к нашему шаблону shablon.html и внесем в него некоторые изменения (листинг П1.5).

В браузере же это будет выглядеть так, как показано на рис. П1.10.

Рис. П1.10. Заголовки

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

Как правило, это:

✓ Georgia;

✓ Times New Roman;

✓ Arial;

✓ Verdana;

✓ Comic Sans MS.

Шрифты подразделяются на шрифты с засечками (типа Georgia, Times New Roman), шрифты без засечек (типа Arial, Verdana) и фантазийные (типа Comic Sans MS).

Чтобы отделить один абзац текста от другого, следует применять тег <P>. А если при этом нужно выровнять текст абзаца к левой или правой стороне страницы, то делается это с помощью атрибута (служебного слова) align так:

✓ <P align=left> – если нужно выровнять абзац к левой стороне;

✓ <P align=right> – если нужно выровнять абзац к правой стороне.

Наберем отрывок из рассказа Валентина Катаева "Поединок" с заголовком и разбивкой на абзацы, под текстом напишем фамилию автора, сдвинув ее вправо. Сохраним этот файл под именем, скажем, poedinok.html (листинг П1.6).

Рис. П1.11. Файл poedinok.html в браузере

А теперь откроем этот файл в браузере (рис. П1.11).

Если текст нужно начать не с нового абзаца, а просто со следующей строки (например, в стихотворениях), то вместо тега <P> ставят тег <BR> (листинг П1.7).

Рис. П1.12. Принудительный перевод строчек с помощью тега <BR>

В браузере получится следующая картина (рис. П1.12).

Для выделения текста жирным шрифтом нам пригодятся теги <B> или <STRONG>. Имейте в виду, что оба они имеют пару – закрывающий тег (с косой чертой).

А вот чтобы сделать текст наклонным, существует тег <I>, который также имеет парный закрывающий тег </I>.

Для подчеркивания текста служит тег <U>, для зачеркивания – тег <STRIKE>. Они также имеют закрывающие теги </U> и </STRIKE> соответственно.

А можно ли сделать текст, к примеру, одновременно и жирным, и наклонным? Конечно можно, для этого надо применить к тексту оба тега – нужно только следить, чтобы они были правильно вложены, например, так:

<STRONG><I>Этот текст и жирный и наклонный</I></STRONG>

А вот так неправильно:

<STRONG><I>Этот текст и жирный и наклонный</STRONG></I>

Поясню это на примере (листинг П1.8).

Сохраните этот файл под любым именем, например variant.html, и затем откройте его в браузере. Получим следующее (рис. П1.13).

Рис. П1.13. Варианты текста

Для того чтобы изменить цвет текста, существует тег <FONT> с атрибутом COLOR, также имеющий свою пару – закрывающий тег </FONT>. Цвет может быть задан как просто названием цвета, так и числовым его значением – главное, не забывать перед числовым значением ставить знак решетки: #.

Например:

✓ <FONT color="red">Это красный цвет</FONT>

✓ <FONT color=#FF0000>Это тоже красный цвет</font>

В табл. П1.1 приведены числовые значения самых распространенных цветов.

Можно также изменять и размер шрифта, достаточно добавить к нему тег <FONT> с атрибутом SIZE.

Таблица П1.1. Числовые значения цветов

А атрибутом face можно задать гарнитуру шрифта. Тег <FONT> также имеет свою закрывающую пару: </FONT>.

К сожалению, из-за строгого ограничения на объем книги, я не могу, как бы ни хотелось, рассказать здесь обо всем, хотя бы понемногу. Но самое необходимое, все же, стараюсь объяснить. Попробую показать на примере варианты применения гарнитур, размеров и цветов шрифта (листинг П1.9).

В браузере это будет выглядеть так (рис. П1.14). Цвета шрифтов вы здесь, конечно, не увидите, но можете поверить мне на слово или воспроизвести все это самостоятельно на своем компьютере.

Рис. П1.14. Гарнитура, размер и цвет шрифта