ПЕРВЫЙ УРОК
Notepad
Итак, открываем блокнот: Start|Programs|Accessories|Notepad и видим перед собой вот это чудо:
Рис. 1. Notepad
Вот он! Вот он этот чистый, невинный лист блокнота. Бум делать из него человека! То есть наше детище… Ну или что у кого там получится…
Пишем в Notepad:
Написали? Просто, правда? Это будет наш шаблон. Давайте и сохраним его под именем shablon.html. Только вот что я еще хочу сказать. Может это и преждевременно, Но! Со временем у вас появится не один десяток файлов, принадлежащих вашей страничке. Сваливая все файлы в одной папке, вам будет все труднее и труднее найти нужный файл, заменить или удалить старый. Я набила на этом много шишек, а потому мой вам мудрый совет. Сразу упорядочивайте файлы по папкам. Так что можете открыть новую папку, назвав ее, к примеру "mysite" и сохранить там наш новоиспеченный shablon.html.
Итак, рассмотрим еще раз, уже повнимательнее наш шаблон. С первого же взгляда видно, что практически все написанные теги - парные!
<HTML> имеет пару </HTML>
<TITLE> имеет пару </TITLE>
<HEAD> имеет пару </HEAD>
<BODY> имеет пару </BODY>
И вы, скорее всего, обратили внимание на косую черту в второй колонке тегов. Она означает конец тега.
Теперь вы знаете, как выглядят некоторые теги, но возможно не знаете что они означают. Но сейчас вы узнаете и это… Вы многое что теперь узнаете. Клянусь своим сковородником!
Теги
Тег <HTML></HTML> - это просто границы нашего документа. Благодаря этим тегам браузер распознает начало и конец нашей странички, расположенной между этими тегами. И выводит его содержание на всеобщее обозрение.
Тег <HEAD></HEAD> - это заголовок документа (не путайте с названием!!!). Информация, находящаяся между ними не видна на страничке, она необходима тем программам, которые ее могут просматривать. Заголовок не является обязательным элементом. Но все-таки, должен быть заголовок документа, кроме того, туда входят такие полезные элементы, как стиль документа, ключевые слова, да и много полезных вещей, без которых потом трудно будет обойтись.
<TITLE></TITLE> - между этими тегами мы будем писать название нашей странички. И это название отзовется самой верхней строчкой в окне браузера. Не делайте его слишком длинным. Достаточно одной строчки. А то и одного слова. Советую вам не называть его общими названиями, ведь ваша страничка уникальна, правда? Вместо безликой "Моя домашняя страничка" дайте то имя, ради которого вы и решили себя явить миру. У меня этим именем стало "Дикая Правда". Его уж точно ни с чем не спутаешь! Ради любопытства, загляните на мою страничку http://www.dikarka.ru и на самом верху окна увидите название "ДИКАЯ ПРАВДА". Догадались теперь, как я ухитрилась его туда запузырить? То-то же… Проще пареной репы!
<BODY></BODY> - ну а это и есть тело документа. Все, что мы запихнем между этими тегами, все наши таланты, работы и творения, фотографии, рисунки, фильмы, музыку и бог знает что вы еще там напридумываете, все это отобразится на вашей страничке. И от того, на сколько она будет содержательной, интересной, красивой и уникальной, будет зависеть и популярность вашего сайта. Хотя, скажу откровенно, мало сделать сайт хорошим, его еще нужно разрекламировать. И хоть это и не очень приятное слово, режущее слух, но как еще дать понять миру, что вы существуете? А как это сделать, я тоже расскажу… но позднее.
Авторские права
Да! Чуть не забыла! Пожалуйста, отнеситесь со всей серьезностью к тому, что я сейчас скажу. Вы несете полную правовую ответственность за все, что помещаете на своей страничке. Не разглашайте чью-то личную информацию, помните о конфиденциальности частной жизни. Уважайте законы авторского права! Не воруйте чужое! Во всемирной паутине немало мест, где можно бесплатно скачать понравившиеся картинки, фотографии, музыку и многое другое. Но если там стоит "copyrigt" - остановитесь! Если же что-то разрешено скопировать, но с ссылкой на источник, обязательно дайте эту ссылку. Не выдавайте чужое за свое! В общем, старайтесь показать, что умеете делать вы и только вы, а не рекламировать других.
Ну, теперь можно и прерваться, и посмотреть, что же у нас там получилось в нашем первом файле. Открываем свою папочку "mysite", разыскиваем файл "shablon.hmtl" . Хотя, чего его разыскивать? Кроме него там и нет пока ничего… и попробуем его открыть. Так… и что мы видим? Правильно… ничего. А чего показывать, если мы туда ничего своего не внесли? Что ж, попробуем исправить положение.
Надеюсь у вас есть какая-нибудь ваша фотография? Все равно какая, лишь бы была! Надеюсь она названа латинскими буквами? И нижнем регистром? И, желательно в формате jpg? Типа такой… myfoto.jpg. Не обижайтесь, но некоторые вещи я буду повторять сто раз, потому как если бы мне кто раньше так повторял… мне не пришлось бы обливаться слезами, лупить ни в чем не повинный компьютер и переделывать заново свои работы. Тогда начнем...
Рождение первенца
Да! Кстати… а как же открыть нам свой блокнот, если он сразу открывается в окне браузера? Думаете подкололи, да? А очень просто! Для этого есть два пути, которыми я обычно пользуюсь. Уверяю, есть еще и другие…
1. Открыть опять блокнот (для особо забывчивых - Start|Programs|Accessories|Notepad). Хотя давно пора выставить его иконку на рабочий стол… Открыли? Ну и оттуда File|Open… достать наш родной, единственный и неповторимый shablon.html. Получилось? Ну и славненько…
2. Если у вас открыт браузером этот файл, ткните правой кнопкой мыши по экрану и выберите меню View Source, результат будет тот же. Наш файл сам откроется в NotePad!
3. Есть конечно и еще дикий способ… заменить расширение shablon.html на shablon.txt и потом открыть его. Но потом опять придется сохранять под расширением html. Так что не советую…
Итак, хватит болтовни, смотрим что у нас там осталось с прошлого раза:
Вы уже выучили наизусть этот наш шаблон как "Отче наш"? Нет? Странно… мы им будем пользоваться постоянно.
Хотя, скажу вам по секрету, можно писать эти теги и строчными буквами, браузеру на это начхать. Точно так же откроет он и содержимое этого файла:
Ну а теперь запомнили? Еще повторить? Ладно… в общем, объясняю, я буду писать буквы всех тегов строчными буквами исключительно из-за того, чтобы вам легче было отличать изменяемую часть от постоянной. Договорились? А вы можете писать как хотите. Как удобней.
Итак, немного изменим содержимое нашего шаблона, вставив туда свою фотографию myfoto.jpg. Кстати, эта фотография должна лежать в той же папке, что и shablon.html
Ну и сохраним этот файл уже не под именем shablon.html, а под другим именем, например, "myhome.html" В принципе, можно сохранить и под расширением "...htm" До недавнего времени я так и поступала. Как известно, краткость - сестра таланта, и я всегда старалась сэкономить если не на деньгах, то хотя бы на буквах. Каково же было мое изумление, когда, загрузив свою новую страничку на сервер, я поняла, что день, потраченый на загрузку файлов на сервер прошел впустую. Не загрузилось ни-че-го! И только, прочитав инструкцию сервера, я поняла, что ошибка - в недостающей четвертой буковке…Вот вам и талант, вот вам и сестра! Вот вам и родня! Так что будьте бдительны! И не забудьте сохранить его в той же папке, что и "shablon.html" и "myfoto.jpg".
Надеюсь, вы все сделали правильно? Чтобы проверить, пойдем и откроем файл "myhome.html" и посмотрим что получилось. А должно получиться примерно следующее:
Рис. 2. "myhome.html"
Нда…негусто. Но все же лучше, чем ничего.
Загрузка странички на сервер
А теперь мы сделаем вот что. Найдем место для нашего сайта и выложим эту нашу первую страничку на халявный сервер. Вы удивитесь, что тут показывать? А я вам скажу, что лучше сразу поместить то, что есть, и постепенно отлаживать.
Конечно, можно пойти и другим путем: сначала сделать отличную страничку, и только потом загрузить ее на сервер, но на это у меня свои возражения. Во-первых, что хорошо смотрится на домашнем компьютере, может показываться в интернете по-другому. Может и вообще не показываться. И поэтому, отлаживая страничку с самого начала, вам легче будет докопаться до ошибок. А от ошибок, уверяю вас, никто еще не застрахован.
Так что, если я вас убедила, будем искать место, где можно уютно разместить своего первенца. Вопрос, где же?
Существует множество мест, где с радостью предоставят вам место под ваш сайт. Я попробовала многие. И вот к каким печальным выводам пришла. На одних вешают такую рекламу, что ваша страничка может за ней даже и затеряться. Так, например, можете зайти на мой первый сайт www.dikarrka.chat.ru Видите справа вверху рекламу? Я конечно, понимаю, что за бесплатный сыр нужно платить, но не таким же куском! Кроме того, там постоянно рушатся то почта, то гостевая. До сих пор, я никак не могу связаться с руководством chat.ru и попросить восстановить свою почту и пароль. Я вообще не могу пройти к своему сайту, не могу изменить там ничего, потому как доступ прервался. Так что не советую… Заодно уж обратите внимание на фотографию, которую я, по неопытности туда поместила, предварительно не оптимизировав.
Есть еще служба boom.ru , но по этическим соображениям я сняла оттуда один свой сайт. Почему? Можете посмотреть на www.valentinia.boom.ru
Далее, как-то попробовала разместить сайт на mailru.com, но моя страничка, изготовленная во флэше так долго там грузилась, что все, кого я пригласила на свою страничку, жаловались на то, что загрузка - бесконечная. И я вынуждена была перевести страничку на более быстрый сервер.
В общем, больше всего я довольна службой narod.ru. Так что, если вы еще не подобрали себе другую службу, можете разместить свою первую страничку там. Как это сделать?
Да тоже несложно. Объясню сейчас все по шагам.
Набираем в окошке браузера адрес "http://www.narod.ru", нажимаем там на ссылку "мастерская" и далее - на кнопку "регистрация нового аккаунта на Яндексе". Теперь заполните предоставленную форму, только вначале придумайте имя для своего сайта. Обычно все распространенные имена уже заняты, и вам придется изрядно попотеть, прежде, чем вам удастся найти подходящее имя. Так, мне удалось застолбить dikarrka.narod.ru Далее, запомните, а лучше запишите в нескольких местах пароль для своего сайта, и можем уже выложить свои работы на свой сайт.
Опять возвращаемся на http://www.narod.ru, заходим по ссылке "мастерская" и уже смело пишем свой логин (у меня "dikarrka"), вводим свой пароль (не скажу какой), нажимаем "войти", в правой колонке видим ссылку "загрузка файлов на сайт", так же храбро жмем на нее… и попадаем в святую святых! Конечно это не врата рая, но все-таки… Нажимаем первую кнопку "Browse" и ищем на своем компьютере наш файл "myhome.html" Щелкаем по нему два раза. Далее, жмем на следующую кнопку "Browse" и находим второй наш файл "myfoto", и также нажимаем на него два раза, чтобы он появился у нас в свободном окошке левее кнопки "Browse". Надеюсь, я все объяснила понятно. Далее жмем на кнопку "загрузить файлы" и ждем конца загрузки.
Думаю, сам принцип понятен. Через кнопки "Browse" мы засылаем файлы на сайт. Вот и все.
Как только файлы загрузились, можете набрать в окошке браузера свой новый адрес (у меня это www.dikarrka.narod.ru) и любоваться своим творением. Пока не надоест. А как надоест, приступим к следующему уроку.
Что? Не получилось??? Показывает ошибку??? Ай-я-яй…вот беда какая! Может ошибку где допустили? Может кавычку где забыли? Или русскими буквами что написали? А может вместо семейной фотографии "порнуху" заслали? Нет? Ну тогда точно хакеры постарались. Больше некому. Или служба эта narod.ru виновата. Надо же кого-то обвинить…У меня, кстати… то же самое! Не загрузилось ничего!
Ну ладно, каюсь, это я виновата. Причем умышленно. Только вот ругаться не надо. Просто нужно назвать первый файл одним простым именем index.html. Ведь должна же программа понять, какой из десятков, сотен а то и тысячи файлов нужно открыть первым, чтобы через него уже можно было переходить к другим вашим страничкам?
Итак, переименовываем наш многострадальный файл "myhome.html" в "index.html" и идем опять в http://www.narod.ru для загрузки "правильного" файла. Заходим по ссылке "управление файлами", удаляем старый файл "myhome.html", возращаемся в "мастерскую", идем по ссылке "загрузка файлов на сайт", опять нажимаем кнопку "Browse", выбираем наш файл "index.html", и нажимаем кнопку "загрузить файлы". После загрузки нажимаем справа вверху свой "проект" и смотрим что получилось…. И получилось!
Вот теперь можете поздравить себя с победой. А впереди у нас их будет еще немало! Уверяю Вас!
(В. Ахметзянова, 2005 г)