От компьютерного чайника до самовара
Выпуск 55

Для тех, кто присоединился к подписке.

 Вы можете посмотреть 54 предыдущих  рассылки по адресу http://www.doctor.oost-west.com/rassilka.htm . Там Вы сможете прочитать о том, как выбрать себе компьютер, о мышах, рабочем столе, окнах Windows и их зависаниях, о русификации компьютера, о сохранении информации, инсталляции компьютера, файловых системах, вирусах и оптимизации системы, об использовании bios так же о том, как самому сделать сайт.

Дорогие, не отписавшиеся читатели рассылки, поздравляю Вас с Новым Годом и Рождеством и желаю Вам всего наилучшего в Новом Году. Я понимаю, что не отписались Вы только по забывчивости, так как все выглядело так, как будто рассылка уже умерла. А вот представьте себе и нет.

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

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

Комментарии должны быть не слишком маленькими, иначе система их не примет, а также они должны быть интересными по своему содержанию и отвечать теме поста, иначе не приму я.

Вот адрес этого блога - http://blog-n.com/computer

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

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

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

Поэтому дарю программу, с помощью которой Вы сможете посмотреть на свой дом, с высоты спутника.

Я живу в маленьком городе, так что, когда я попробовала набрать свой город (FlyTo и название города), ничего из этого не вышло. Тогда я набрала город побольше, который находится в 14 км от моего. Затем я увеличивала колесиком мыши масштаб, пока не появился мой городок. Сдвинула мышью глобус, и продолжала увеличивать, пока не нашла свой дом. Там были видны даже деревья перед домом и машины.

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

Скачать можно на странице www.doctor.oost-west.com , в самом низу. Программа называется GoogleEarthWin.

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

Делаем свой сайт (урок 9)

Помнится, начиная эти уроки, я писала, что не буду давать HTML, так как вполне можно и без него обойтись, пользуясь FrontPage. С одной стороны, это так и есть, но с другой стороны, если у Вас вовсе нет никаких представлений о HTML кодах, Ваши возможности будут ограничены, и в ряде ситуаций Вы столкнетесь с проблемами.

Я не говорю, что нужно глубокое и всестороннее знание этого языка, но понимание его и знание хотя бы основных ТЭГов может Вам весьма и весьма быть полезным. Я просто спросила себя, часто ли мне самой требуется знание или хотя бы понимание этого языка, и честно ответила себе - часто.

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

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

Часто Вам могут потребоваться для Вашего сайта готовые скрипты. Скрипты - это программы, написанные на различных языках программирования, и выполняющие различные активные функции на Вашем сайте. Наиболее популярны сейчас для web страниц - Перл, PHP, Ява.

Я уже писала раньше, что HTML не является языком программирования, а это просто язык разметки страниц. Язык программирования должен иметь операторы, обеспечивающие логику выполнения программ. Это прежде всего логические операторы и операторы циклов. Таковых в HTML нет. Поэтому, если Вам нужно что-то серьезное исполнить на своем сайте, то придется или самому написать программу или ее купить.

Вот, к примеру, я купила недавно скрипт блога, о котором писала выше http://blog-n.com/computer. Чтобы установить этот блог, а затем наполнять его отформатированными текстами нужно, пусть и небольшое, знание HTML кодов. То же самое касается и скрипта магазина, также недавно приобретенного мною. До этого у меня был уже магазин, из линейки магазинов Ласто - http://shop.oost-west.com/multi/. Но это был мультиагентский магазин. Проще говоря, - партнерский, куда я импортирую другие имеющиеся магазины типа GOLD. За продажи из этого магазина я получаю партнерские скидки. А теперь я купила магазин GOLD, который устанавливается сложней, чем партнерский магазин. Прибавьте то, что магазин Ласто предназначен в основном для цифровых товаров, а у меня товары совсем другие, так что мне приходится приспосабливать его к своим нуждам. Здесь, конечно, без некоторого знания HTML кодов обойтись было бы не возможно.  Вы можете взглянуть на этот магазин, хотя он еще очень далек от завершения и запуска в эксплуатацию. Вот его адрес: http://shop.oost-west.com/gold/

Если Вам понадобятся такие скрипты, Вы можете их также приобрести. Например, в моем партнерском магазине в разделе "Мечта вебмастера" http://shop.oost-west.com/multi/index.php. Как видите, я являюсь одновременно и продавцом и покупателем. То, что мне нужно, я покупаю в своем же магазине. Например, там же я купила "Почтового дятла" - отличный скрипт рассылок. Такова особенность интересной концепции магазинов Ласто. Для работы с Дятлом также нужно иметь представление о HTML.

Кроме того, есть такая интересная штука, как CSS, о которой мы поговорим позже. Для использования этой, очень полезной технологии, также нужно что-то смыслить в HTML кодах.

О том, что такое HTML я уже писала, но напомню еще раз. Это весьма свежее изобретение. HTML был изобретён в 1990 году учёным Тимом Бёрнсом-Ли (Tim Berners-Lee), и предназначался для облегчения обмена документами между учёными различных университетов. Проект имел больший успех, чем Tim Berners-Lee мог ожидать. Этим изобретением HTML он заложил основы современной сети Internet.

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

HTML коды дают знать Вашему браузеру, как он должен показать Вам страницу в интернете. Например, если Вы вызовете ту или иную страницу с помощью Вашего браузера (большинство использует в качестве браузера Internet Explorer), а затем нажмете в меню "вид" "просмотр HTML кода, то Вы и увидите эту страничку изнутри. Если не увидите, то это значит на сайте применены какие-то ухищрения, с целью скрыть свои коды.

Вот эти самые HTML коды, которые Вы видите в браузере, можно писать "ручками", как любят говорить ваятели сайтов, а можно поручить это делать какой-то приспособленной к этому программе. Наиболее популярные программы - это Dreamweaver и FrontPage, хотя, конечно, и не единственные. Даже Word умеет это делать, хотя и очень коряво. Можно назвать еще несколько популярных редакторов этого типа: Adobe GoLive, HomeSite, ColdFusion. Не так уж важно, каким именно редактором Вы будете пользоваться, но FrontPage имеет то неоспоримое удобство, что он входит в состав Office.

Качество программ WYSIWYG (What You See is What You Get - Что вижу, то получаю) зависит от того, насколько удобно с ними работать, а также и от чистоты кода, который можно получить с помощью этой программы. В принципе, сайт, написанный ручками, если ручки, конечно, умелые, будет всегда лучше, чем с помощью WYSIWYG редактора. Но тут приходится идти на компромисс, так как использование таких редакторов позволяет очень экономить время.

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

По мере того, как доступ к интернету становится все более скоростным, а место предоставляемое хостингами на своих компьютерах - больше, требования к чистоте кодов снижаются. Но все же никогда не мешает причесать коды, сотворенный одним из WYSIWYG редакторов. FrontPage имеет даже встроенную функцию оптимизации кода, но есть программы, которые делают это гораздо лучше. Иногда имеет смысл сделать это и вручную. Но для этого также нужно некоторое знание HTML кодов.

Считаю, что я Вас уже убедила в том, что эти знания Вам будут не лишними, поэтому начнем.

Мы будем изучать XHTML (Extensible HyperText Mark-up Language), который, является более новым и продвинутым вариантом HTML.

XHTML также как и HTML состоит из тегов. Теги показывают браузеру, как он должен размечать и показывать веб страницу. Теги начинаются знаком "< "и заканчиваются знаком ">". В основном теги ходят парами, т.е. имеется открывающий тег и закрывающий тег. Закрывающий тег отличается наличием знака слэш - " /".

Например, страница начинается тегом <html> и заканчивается тегом </html>.  Таким образом, Вы сообщаете браузеру, что будете с ним общаться с помощью языка HTML.

На странице также должна быть и шапка, где храниться служебная информация о Вашей странице.

Это теги <head> и </head>

Все же содержимое страницы находится между тегами <body> и </body>.

Таким образом, каждая страница должна иметь такую структуру:

<html>
        <head>
        </head>

        <body>
        </body>

</html>

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

Шапка находится выше тела, так же, как и у нас с Вами.

Но некоторые теги не являются парными. Например, тег перевода строки - </br>

Сейчас мы напишем нашу первую страничку, но сначала сделаем следующее:

• Создайте где-нибудь папку по имени "тест". Можете создать эту папку в "моих документах"

• Откройте "Панель управления", а затем "Свойства папки". Нажмите там на "Вид", и найдите такое: "скрывать расширения для зарегистрированных типов файлов". Посмотрите, если там стоит галочка, уберите ее. Скрывать ничего не будем.

Теперь откройте блокнот и напишите такой текст:

<html>
        <head>
        </head>
       
        <body>
        привет <br> всем читателям рассылки
        </body>
</html>

Помните, где находится блокнот? Все программы - стандартные.

Теперь запишите этот файл в папку "тест". Когда Вы нажмете на "сохранить как", Вы увидите: *.txt. Вместо звездочки впишите имя, например, test1. Вы получите самый что ни на есть обыкновенный текстовой файл. Превратить его в страничку для интернета дело одной секунды.

Для этого откройте папку "тест", найдите только что созданный Вами текстовой файл, затем нажмите на него правой кнопкой мыши и выберите из меню - "переименовать". Затем замените txt на html. Если система будет Вас предупреждать, что файл не откроется, не верим. Вы увидите, что пиктограмма файла мгновенно преобразуется в знакомый Вам вид - голубой значок с буквой е. Теперь нажмите на этот значок, и созданный Вами файл откроется в браузере.

Первая страничка готова. Как видите, после слова "привет" идет перевод строки. Это от того, что мы поставили тег </br>.

Нажмите на Ваш файл test1 правой кнопкой и выберите "открыть с помощью", а затем найдите блокнот. Вставьте еще один тег перевода строки. Вот так:

<html>
        <head>
        </head>

         <body>
         привет <br><br> всем читателям рассылки
        </body>

</html>

Затем выберите в блокноте "сохранить как", затем сделайте так, чтобы были видны не только текстовые файлы, а все файлы, выберите свой файл test1 и сохраните изменения.

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

Теперь аналогичным способом вставьте два тега - открывающий и закрывающий. Вот так:

<html>
        <head>
        </head>
       
        <body>
        <b>привет</b><br> <br> всем читателям рассылки
        </body>
</html> 

Для простоты, Вы можете нажать в блокноте просто на "сохранить", и все будет сохранено.

Откройте файл, и Вы увидите, что слово привет стало жирным. Таким образом, мы выучили еще один тег - <b>

Теперь снова откройте блокнот, и на чистом листе напишите:

<html>
        <head>
        </head>

        <body>
       <h1>тег h1</h1>
       <h2>тег h2</h2>
       <h3>тег h3</h3>
       <h4>тег h4</h4>
       <h5>тег h5</h5>
       <h6>тег h6</h6>
        </body>
</html>

Затем опять сделайте из текстового файла файл html. Кстати, чтобы это ускорить, можно было сделать так:
открыть старый файл test1, убрать предыдущий текст, внести новый и запомнить файл под именем test2.

Посмотрите новый файл в браузере. Все понятно без комментариев. Теги h1, h2 и т.д. переводят строку и меняют размер шрифта.

Кстати, если Вы посмотрите что происходит с кодами, созданными во Front Page при изменении  размера шрифта, то выглядит это совсем иначе.

Например, если Вы запишите в блокноте все эти теги подряд:
<h1>тег h1</h1><h2>тег h2</h2><h3>тег h3</h3><h4>тег h4</h4><h5>тегh5</h5><h6>тег h6</h6>,
то при просмотре в браузере ровным счетом ничего не измениться. Но, если вы хотите, чтобы в странице, созданной во FrontPage, переводилась строка, то Вам придется нажимать на enter. Я выбрала для первой строки шрифт "1" (8пт), для второй - шрифт "2"(10пт), а для третьей - шрифт "3" (12 пт).

тег 1

тег2

тег 3

Если Вы загляните в коды, то увидите:

<p align="left"><font size="1">тег 1</font></p>
<p align="left"><font size="2">тег2</font></p>
<p align="left">тег 3</p>

 Это код, созданный FrontPage.

Нажмите во FrontPage кнопку "код", и поэкспериментируем.

Я немного изменила этот код:

<p><font size="1">тег 1</font></p>
<p><font size="2">тег2</font></p>
<p>тег 3</p>
А, как видите, ничего и не поменялось. В третьем случае размер не указывается, так как это размер по умолчанию.

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

Но во Front Page можно выбирать и выделение с помощью тегов h. Вот я пишу внизу текст, выделяю этот текст, а на панели форматирования, слева в окошке, выбираю вместо обычный, - заголовок 1.

тег 1

Вот какой код там получился:

<h1>тег 1</h1>

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

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