Текст книги "Я создаю свой собственный персональный сайт"

Я создаю свой собственный персональный сайт
Не Боги горшки обжигают
Олег Северюхин

© Олег Северюхин, 2016

Создано в интеллектуальной издательской системе Ridero

Приветствую всех собравшихся в нашем классе для изучения предмета, который мы назовем: «Я создаю свой собственный персональный сайт» из серии «Не боги горшки обжигают».

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

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

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

Вы это можете, и вы это поймете!

Приведу свой собственный пример.

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

В 1990 году я и компьютер – это звучало совершенно дико, примерно, как неандерталец, которому в пещеру принесли ноутбук и сказали:

– Мужик, вот тебе машинка, будешь по ней новости узнавать.

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

Для обучения мне был выделен инженер, который стал объяснять мне устройство и принцип действия компьютера, что-то там про модули, шины, процессоры, вентиляторы, обдуватели, преобразователи и прочее. Я слушал его как тот неандерталец, а на второй день сказал:

– Знаешь что, с железяками возиться будешь ты, а мне нужно знать, как на нем работать, на какие кнопки нажимать, чтобы получить желаемый результат?

Он мне снова про процессоры и вентиляторы.

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

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

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

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

Итак, что нам нужно для работы?

1. Человек, умеющий читать и писать, чтобы прочитать, что здесь написано и написать (напечатать) то, что ему рекомендовано.

2. Человек должен знать латинские буквы.

3. Человек должен уметь включать и выключать компьютер.

4. Человек должен хотя бы раз побывать в Интернете.

5. Человек хотя бы раз в жизни создавал текстовый документ.

И мы предполагаем, что вы все сидите около своих компьютеров.

Тогда начинаем.

Включаем компьютер.

Открываем браузер.

Всегда задается вопрос: а что такое браузер?

Браузер или веб-обозрева́тель (от англ. Web browser) – прикладное программное обеспечение для просмотра веб-страниц; содержания веб-документов, компьютерных файлов и их каталогов; управления веб-приложениями; а также для решения других задач. В глобальной сети браузеры используют для запроса, обработки, манипулирования и отображения содержания веб-сайтов.

К примеру, браузер Internet Explorer и Microsoft Edge поставляются в составе операционной системы Microsoft Windows; Mozilla Firefox – отдельно или в составе дистрибутивов Linux (например, Ubuntu); Safari – в составе операционной системы Mac OS X; Google Chrome, Opera и другие браузеры – как самостоятельные программы.

Затем мы открываем блокнот.

Нам потребуется один из вот этих блокнотов:

– AkelPad

– NotePad

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

NotePad у вас в компьютере и его будет вполне достаточно для первоначальной работы.

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

Возникает вопрос? Что такое файловый менеджер?

Файловый менеджер (англ. filemanager) – компьютерная программа для работы с файловой системой и файлами. Файловый менеджер позволяет выполнять наиболее частые операции над файлами – создание, открытие/проигрывание/просмотр, редактирование, перемещение, переименование, копирование, удаление, изменение атрибутов и свойств, поиск файлов и назначение прав. Помимо основных функций, многие файловые менеджеры включают ряд дополнительных возможностей, например, таких, как работа с сетью (через FTP, NFS и т. п.), резервное копирование, управление принтерами и пр.

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

Я пользуюсь файловым менеджером Total Commander.

Скачать дистрибутив или potable можно в интернете.

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

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

Очень многие люди работают с документом, затем нажимают комбинацию «файл + сохранить» и файл улетает в неизвестно куда и потом человек годами не может найти этот файл или же сохраненный файл сохраняется на заставке монитора, залепляя экран и съедая оперативную память, замедляя работу компьютера.

Запомните самое главное правило работы с файлами:

Сразу после создания файла, даже не напечатав в нем ни буквы, вы должны сохранить его под понятным именем в рабочем каталоге и в нужной вам папке. Тогда вам не придется искать этот файл, потому что вы знаете, где он находится. И второе. Если вы сразу не сохранили файл, то в случае отключения электроэнергии или при поломке компьютера вся ваша работа исчезнет, как будто вы ничего и не делали, а в сохраненном файле у вас сохранится практически всё.

Итак. Создаем новый документ в блокноте. Копируем в файл один из выше написанных абзацев, например: «Разница в них небольшая, просто во втором блокноте все строки пронумерованы и подсвечиваются теги. Что такое теги, мы выясним чуть попозже» и сразу же сохраняем файл в папке chainik под именем proba.html, тип файла: все файлы (*.*) в кодировке windows 1251 (ANSI – кириллица).

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

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

Затем мы открываем вновь созданный документ proba.html в браузере (в программе для просмотра страниц интернета).

Это делается двумя способами:

1. Традиционный: Файл – Открыть… в диалоговом окне ищем файл в каталоге Proza и в папке chainik и открываем.

2. При помощи клавиш: Ctrl + O в открывшемся диалоговом окне находим нужный файл в каталоге Proza и в папке chainik и открываем.

Необходимые пояснения: знак + показывает следующее действие, а не нажатие на знак «плюс». «O» это не ноль, а латинская буква «о».

В браузере мы видим текст: «Разница в них небольшая, просто во втором блокноте все строки пронумерованы и подсвечиваются теги. Что такое теги, мы выясним чуть попозже». То есть тот текст, который мы разместили в файле proba.html

Поздравляю вас! Вы создали свой первый интернет-документ.

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

В набранном в блокноте тексте мы поставим вот такие значки: «Разница в них небольшая, <s> просто во втором блокноте </s> все строки пронумерованы и подсвечиваются теги. Что такое теги, мы выясним чуть попозже».

Сохраняем текст в блокноте: Файл – Сохранить.

Обновляем текст в браузере: «Обновить содержимое» или нажатием на клавишу F5. Текст волшебным образом зачеркнулся.

Заменяем букву «s» в угловых скобках на букву «u». Сохраняем файл в блокноте и обновляем окно браузера. Текст уже подчеркнутый, а не зачеркнутый.

Заменяем букву «u» на букву «b». Сохраняем файл в блокноте и обновляем окно браузера. Текст уже не подчеркнутый, а жирный.

Заменяем букву «b» на букву «i». Сохраняем файл в блокноте и обновляем окно браузера. Текст уже не жирный, а курсив.

Заменяем букву «i» на «h1». Сохраняем файл в блокноте и обновляем окно браузера. Текст уже не курсив, а огромные буквы, как в заголовке.

Почему это так? А вот сейчас мы подошли к следующему вопросу – языку разметки текстов для интернета, HTML. Но не пугайтесь, этот язык мы не будем учить, мы просто узнаем о нем и усвоим его основной принцип.

HTML (от англ. HyperText Markup Language – «язык гипертекстовой разметки») – стандартный язык разметки документов во Всемирной паутине. Большинство веб-страниц содержат описание разметки на языке HTML (или XHTML). Язык HTML понимается браузерами; полученный в результате понимания (интерпретации) форматированный текст отображается на экране монитора компьютера или мобильного устройства.

Как мы поняли, в интернете отображаются только файлы HTML, такие же как наш файл proba.html

Второе. Изменению подвергается только тот текст, который выделен тегами.

Третье. Тегом является элемент, ограниченный угловыми скобками, например, <b>, <u>, <s>.

Четвертое. Тег имеет начало <b> и конец </b> с косым слешем.

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

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

Мы будем работать с шаблонами сайтов, которых множество в интернете. Вот один из примеров шаблона, fantasy6. Скачиваем его здесь: http://shablonfree.ru/news/shablon-sajtov-html-fentezi-go/

Что такое скачивать и как это делать, предполагаем, что вы это знаете и умеете.

В составе шаблона файл index.html, папки css (ее мы трогать не будем, потом вы сами залезете в нее и будете экспериментировать по своему вкусу) и images (для рисунков).

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

Итак, начинаем работать с шаблоном.

Самый главный файл – index.html

Открываем этот файл в браузере, точно также, как мы открывали файл proba.html (Ctrl + O, в диалоговом окне находим файл index.html из нашего шаблона).

В браузере у нас открылось изображение с горами, рисунками и всякими латинскими буквами. Это ваш будущий сайт.

В блокноте мы открываем файл index.html из нашего шаблона. Вот его полное содержание.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>

<html>

<head>

<meta http-equiv=«Content-Type"content=«text/html; charset=windows-1251»>

<title> Fantasy website </title>

<meta name=«description"content=«Fantasy website»>

<meta name=«keywords"content=«fantasy, fiction»>

<link href=«css/style. css"rel=«stylesheet» type=«text/css»>

</head>

<body>

<div id=«wrap»>

<div id=«page»>

<div id=«menu»>

<ul>

<li> <a href=«#»> Home </a> </li>

<li> <a href=«#»> AboutUs </a> </li>

<li> <ahref=«#»> Glossary </a> </li>

<li> <a href=«#»> OurClients </a> </li>

<li> <ahref=«#»> Testimonials </a> </li>

<li class=«last»> <ahref=«#»> Contact Details </a> </li>

</ul>

</div>

<div id=«topline»>

<div id=«company_name»> FantasyWebSite </div>

</div>

<div id=«header»>

<div id=«slogan»> Slogan <br>

of you company </div>

<div id=«slogan_sh»> Slogan <br>

of you company </div>

</div>

<div id=«contentwrap»>

<div id=«sidebar»>

<div class=«banners»>

<img src="images/banner_1.png"width=«254» height=«80» alt=«»>

<img src="images/banner_2.png"width=«254» height=«80» alt=«»>

<img src="images/banner_3.png"width=«254» height=«80» alt=«»>

</div>

<p> Lorem Ipsum is simply dummy text of theprinting and typesetting industry. Lorem Ipsum has been the industry’s standarddummy text ever since the 1500s, when an unknown printer took a galley of typeand scrambled it to make a type specimen book. It has survived not only fivecenturies, but also the leap into electronic typesetting, remaining essentiallyunchanged. </p>

</div>

<div id=«body_area»>

<h1> Welcome to Fantasy website! </h1>

<p> <br>

Fantasy is a genre of art that uses magic and othersupernatural forms as a primary element of plot, theme, or setting. The genreis generally distinguished from science fiction and horror by overall look, feel, and theme of the individual work, though there is a great deal of overlapbetween the three (collectively known as speculative fiction). In its broadestsense, fantasy covers works by many writers, artists, film makers andmusicians, from ancient myths and legends, to many recent works embraced by awide audience today. </p>

<p> Though the genre in its modern sense is lessthan two centuries old, its antecedents have a long and distinguished history. </p>

<p> Beginning perhaps with the Epic of Gilgameshand the earliest written documents known to humankind, mythic and otherelements that would eventually come to define fantasy and its various subgenreshave been a part of some of the grandest and most celebrated works ofliterature. From The Odyssey to Beowulf, from the Mahabharata to The Book ofOne Thousand and One Nights, from the Ramayana to the Journey to the West, andfrom the Arthurian legend and medieval romance to the epic poetry of the DivineComedy, fantastical adventures featuring brave heroes and heroines, deadlymonsters, and secret arcane realms have inspired many audiences. In this sense, the history of fantasy and the history of literature are inextricablyintertwined. </p>

<p> <EM> From Wikipedia, the freeencyclopedia </EM> </p>

</div>

</div>

<div id=«footer»>

<div id=«bottom_addr»> © 2011 CompanyName. All Rights Reserved </div>

</div>

</div>

</div>

<div id="bottom-line"><imgsrc="images/bottom-line.png“ width=„820"height=«9» alt=«»> </div>

<divstyle=«position: absolute; left:-3072px; top:0"align=«center»> <a href="http://shablonfree.ru/">Рейтинг сайтов </a> <ahref="http://shablonfree.ru/">Шаблоны сайтов </a> </div>

</body>

</html>

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

Решительно преодолеваем свой страх! Все нормально. Противник виден и как его лупить мы знаем. Смотрим одновременно на картинку сайта и на интернет-язык, которым он написан.

В окне с шаблоном сайта мы видим название «Fantasy WebSite». Тоже находим и в файле index.html. Меняем запись на «Сайт великолепной Маши Ивановой» (только без кавычек).

Сохраняем файл в блокноте (файл + сохранить) и обновляем браузер нажатием клавиши F5 и у нас в шаблоне появилась надпись: Сайт великолепной Маши Ивановой.

И это первая победа над неведомым зверем, который попался нам в руки.

Что у нас рядом? Slogan of you company. Что в переводе означает: слоган вашей компании, или ваш личный девиз. Какой придумаем? Предлагаю: Королева российской красоты!

<div id=«header»>

<div id=«slogan»> Slogan <br>

of you company </div>

<div id=«slogan_sh»> Slogan <br>

of you company </div>

</div>

Вот этот элемент отвечает за размещение слогана. Вместо слова «Slogan» пишем слово «Королева», а вместо «of you company» – «российской красоты!». Сохраняем файл и обновляем браузер. Получилось!

Как видите, сайт уже стал понятнее. Попутно в учебнике можно посмотреть, для чего применяется тег <div> </div>, а тег <br> используется отдельно и применяется для переноса текста или объекта наследующую строку.

Если мы возьмем вот этот тег <div id=«slogan»> Slogan <br> of you company </div> и уберем <br>, то в теге <divid=«slogan»> Slogan of you company </div> будет написан в одну строку. Можете поэкспериментировать.

Возьмемся за меню сайта. Смотрим, что написано в шаблоне и находим это же в файле index. Вот оно:

<ul>

<li> <a href=«#»> Home </a> </li>

<li> <a href=«#»> AboutUs </a> </li>

<li> <ahref=«#»> Glossary </a> </li>

<li> <a href=«#»> OurClients </a> </li>

<li> <ahref=«#»> Testimonials </a> </li>

<li class=«last»> <ahref=«#»> Contact Details </a> </li>

</ul>

Попутно мы узнаем, что тег <ul> </ul> служит для создания списка, а внутри этого тега тег <li> </li> служит для создания элементов списка.

Следующий тег <a href=«#»> </a> служит для создания ссылки на какой-то ваш ресурс. Вместо элемента # вы ставите интернет-адрес вашей другой странички, и посетитель вашего сайта может по ссылке посмотреть и ее.

Полностью интернет ссылка будет выглядеть вот так:

<a href="http://www.litres.ru/oleg-vasilevich-severuhin/">Мои книги на ЛитРес </a>

Но мы все это не трогаем, а только меняем названия пунктов меню, например, на вот так:

<ul>

<li> <a href=«#»> Песни </a> </li>

<li> <a href=«#»> Подружки </a> </li>

<li> <a href=«#»> Макияж </a> </li>

<li> <a href=«#»> Туфельки </a> </li>

<li> <a href=«#»> Моя киса </a> </li>

<li class=«last»> <a href=«#»> Напиши мне </a> </li>

</ul>

Снова сохраняем файл и обновляем браузер. Все наши изменения отразились в браузере.

Картинка на сайте, конечно, не фонтан, а вам нужно что-то другое. Согласен.

При помощи просмотровщика графических файлов (а их очень много, возьмите, например, простенький XnViev, http://biblprog.org.ua/ru/xnview/) в папке images находим картинку, называется img01, размер 800 на 288 пикселей. Ищем в интернете другую картинку, изменяем ее размер на этот и сохраняем в папку images под тем же именем, что и прежняя картинка. Обновляем браузер и в вашем шаблоне уже находится ваша картинка. Сейчас вы легко можете вставить в шаблон сайта нужные вам изображения и вы уже легче ориентируетесь в измененном шаблоне.

Замечание. Большой рисунок лучше открыть в Фотошоп и сохранить его как рисунок для WEB. Он получается меньшим по объему, но не по размеру и легче загружается у пользователей, у которых не такое быстрое соединение Интернета и не такой мощный компьютер, как у вас.

С левой стороны три рекламных баннера. Если они нужны, то их можно оставить и точно так же в папке images заменить файлы banner 1, 2, 3 своими баннерами по тому же размеру в пикселях.

Если баннеры не нужны, то в файле index.html они прописаны вот здесь:

<div class=«banners»>

<img src="images/banner_1.png"width=«254» height=«80» alt=«»>

<img src="images/banner_2.png"width=«254» height=«80» alt=«»>

<img src="images/banner_3.png"width=«254» height=«80» alt=«»>

</div>

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

<a href="#"><imgsrc="images/banner_1.png“ width=„254“ height=„80"alt=«»> </a>

Если кто-то наведет курсор на рисунок, то курсор покажет, что здесь находится ссылка на какой-то ваш ресурс, с которым вы хотели познакомить читателя.

Замечание. Если вы надумаете убрать элементы в теге <div> </div>, то вы должны следить за тем, чтобы количество удаляемых <div> соответствовало количеству </div>. Образно говоря, если вы удаляете откуда-то кубик, то удаляйте его полностью, а не оставляйте незамеченные вами его грани, которые будут искажать все изображение и весь вид.

И смотрите, доселе неведомый нам сайт и на неведомом языке начал становиться вполне понятным сайтом великолепной Маши Ивановой.

А сейчас наступило время заняться и текстом сайта. Продолжаем работу в файле index.html. Текстовые элементы я заменил абзацами из этой книги для того, чтобы при повторном прочтении в голове что-то оставалось.

Для закрепления изложенного материала можно посмотреть и вот этот, подготовленный мной видеоролик:

https://www.youtube.com/watch?v=u-CYyUreBS0

Еще некоторые детали, на которые нужно обратить внимание.

Элемент charset=windows-1251

Элемент показывает, в какой кодировке написан сайт. Необходимо, чтобы кодировка сайта соответствовала кодировке файла. Например, очень нехорошо, когда charset=windows-1251, а файл в кодировке utf-8. Или наоборот. Все это делается при помощи блокнота при повторном сохранении файла выбирается нужная кодировка файла.

Элемент <title> Fantasy website </title>.

Этот элемент выдает в Интернет название вашего сайта. Поэтому и элемент этот нужно переделать в:

<title> Сайт великолепной Маши Ивановой </title>

Элемент <metaname=«description» content=«Fantasy website»>

Поисковые роботы тоже должны знать название вашего сайта, поэтому переделываем <metaname=«description» content=" Сайт великолепной Маши Ивановой»>

Элемент <metaname=«keywords» content=«fantasy, fiction»>

Поисковые роботы тоже должны знать ключевые слова вашего сайта, поэтому переделываем <metaname=«keywords» content=«Маша, Иванова, красавица, Россия, туфельки, подружки, кошечки, песни, макияж, гламур, лямур»>

Итак, снова поздравим вас с тем, что у вас готов сайт.

Вот он в HTML.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>

<html>

<head>

<meta http-equiv=«Content-Type"content=«text/html; charset=windows-1251»>

<title> Сайт великолепной Маши Ивановой </title>

<meta name=«description» content=«Сайт великолепной Маши Ивановой»>

<meta name=«keywords» content=«Маша, Иванова, красавица, туфельки, подружки, макияж, кошечки, гламур, лямур»>

<link href=«css/style. css"rel=«stylesheet» type=«text/css»>

</head>

<body>

<div id=«wrap»>

<div id=«page»>

<div id=«menu»>

<ul>

<li> <a href=«#»> Песни </a> </li>

<li> <a href=«#»> Подружки </a> </li>

<li> <a href=«#»> Макияж </a> </li>

<li> <a href=«#»> Туфельки </a> </li>

<li> <a href=«#»> Моя киса </a> </li>

<li class=«last»> <ahref=«#»> Напиши мне </a> </li>

</ul>

</div>

<div id=«topline»>

<divid=«company_name»> Сайт великолепной Маши Ивановой </div>

</div>

<div id=«header»>

<div id=«slogan»> Королева <br>

российскойкрасоты! </div>

<div id=«slogan_sh»> Королева <br>

российскойкрасоты! </div>

</div>

<divid=«contentwrap»>

<div id=«sidebar»>

<div class=«banners»>

<img src="images/banner_1.png"width=«254» height=«80» alt=«»>

<img src="images/banner_2.png"width=«254» height=«80» alt=«»>

<img src="images/banner_3.png"width=«254» height=«80» alt=«»>

</div>

<p> Попыткаубрать этот элемент приводит к тому, что вверх поднимается весь текст, поэтомумы не будем дальше экспериментировать и заменим баннеры нужными нам картинками, сопроводив их ссылками на свои ресурсы, примерно, вот так, смотрим на рисунке17 </p>

</div>

<div id=«body_area»>

<h1> Добропожаловать на сайт великолепной Маши Ивановой! </h1>

<p> <br>

Картинкана сайте, конечно, не фонтан, нужно что-то другое. Согласен. В папке imagesнаходим картинку, называется img01, размер 800 на 288 пикселей. Ищем другуюкартинку, изменяем ее размер на этот и сохраняем в папку images под тем жеименем, что и прежняя картинка. Что получилось, смотрим на рисунке 16.

Слевой стороны три рекламных баннера. Если они нужны, то их можно оставить иточно так же в папке images заменить файлы banner 1, 2, 3 своими баннерами потому же размеру в пикселях. </p>

<p> Вблокноте мы открываем файл index.html из нашего шаблона. Смотрим рисунок 11. Издесь совершенно ничего не понятно. Естественно. Когда я первый раз открылтакой файл, мне хотелось убежать в пещеру и спрятаться там от стыда, чтобыникто не видел, какой я никчемный человек. Стоять! Все нормально. Противниквиден и как его лупить мы знаем. Смотрим одновременно на картинку сайта и наинтерент-язык, которым он написан. </p>

<p> Видимназвание «Fantasy WebSite». Тоже находим и в файле index.html. Меняем запись на«Сайт великолепной Маши Ивановой» (только без кавычек). Смотрим рисунок 12.Сохраняем файл в блокноте, обновляем браузер нажатием клавиши F5 и у насполучается вот это. Смотрим рисунок 13. </p>

<p> <EM> Этовсе из книги Олега Северюхина «Не Боги горшкиобжигают»</EM> </p>

</div>

</div>

<div id=«footer»>

<divid=«bottom_addr»> © 2015 Великолепная Маша Иванова </div>

</div>

</div>

</div>

<div id="bottom-line"><imgsrc="images/bottom-line.png“ width=„820"height=«9» alt=«»> </div>

<divstyle=«position: absolute; left:-3072px; top:0» align=«center»> <ahref="http://shablonfree.ru/">Рейтинг сайтов </a> <ahref="http://shablonfree.ru/">Шаблоны сайтов </a> </div>

</body>

</html>

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

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

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

Лучше начинать с бесплатного хостинга. Вот навскидку два адреса, где вы сможете попробовать свои силы:

https://free.1gb.ru/

http://www.freewebhostingarea.com/

Раньше был еще народный narod.ru, но его схарчили ненасытные конкуренты.

После регистрации вам по почте приходят данные на ваш хостинг, то есть на определенное место, в которых есть данные для соединения по протоколу FTP.

FTP (англ. File Transfer Protocol – протокол передачи файлов) – стандартный протокол, предназначенный для передачи файлов по TCP-сетям (например, Интернет). FTP часто используется для загрузки сетевых страниц и других документов с частного устройства разработки на открытые сервера хостинга.

В принципе, особо объяснять и не нужно.

Для загрузки файлов вам нужен FTP-клиент, то есть орудие загрузки, транспортер такой, а им у меня и является Total Commander.

FTP-клиенты почти все одинаковы по принципу действия, есть небольшие изменения и вам самому нужно определить, что вам больше нравится.

Сверху в меню вы видите пункт FTP. Нажимаете этот пункт меню и выбираете «Добавить новое FTP-соединение».

Открывается диалоговое окно и вы выбираете «добавить».

Открывается окно настройки FTP-соединения:

Имя соединения – придумываете сами.

Сервер [порт] – информация провайдера.

Учетная запись – от провайдера.

Пароль – либо свой, либо от провайдера.

После нажатия на «ок» снова открывается диалоговое окно соединения.

Нажимаете на «соединиться» и у вас открывается окно сервера с идентификацией 0 – ноль.

Выделив (отметив) файл в вашей директории, вы нажимаете на кнопку F5 и копируете файлы на сервер. Закончив копирование, нажимаете на кнопку «отключение».

Всё. Файлы находятся на сервере. Вы набираете выданный вам адрес и сайт сверкает всеми огнями радуги в Интернете.

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

Некоторые практические замечания.

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

2. Сделайте описание вашего сайта в блокноте и сохраните его в директории сайта под названием link. txt (название и расширение могут иные, по вашему вкусу и предпочтению, главное, чтобы он всегда был под рукой и в готовности предоставить вам все необходимые данные). В описании должно быть: название сайта, его описание в размере 200—300 знаков с пробелами, чтобы кратко рассказать, о чем сайт, ссылка на сайт и ваш адрес электронной почты. Это вам будет нужно, когда вы будете регистрировать сайт в каталогах и поисковиках, копируя заранее подготовленные данные и вставляя их в регистрационные формы. В файле link. txt будут храниться все данные о вашем сайте, как-то: дата регистрации сайта, информация о ваших базах данных, данные для доступа к сайту по протоколу FTP, коды поисковых систем, счетчики посетителей, скрипты часов, календарей и прочего, что вам понравится.

К примеру, вот такой скрипт:

<FONT class=«ws» face=«Arial"color=«#330099»> Сегодня:

<SCRIPT language=«javascript»>

d = new Array ()

m = new Array ()

calendar = new Date ();

day = calendar.getDay ();

if (day == 0) {d =«воскресенье»}

if (day == 1) {d =«понедельник»}

if (day == 2) {d =«вторник»}

if (day == 3) {d =«среда»}

if (day == 4) {d =«четверг»}

if (day == 5) {d =«пятница»}

if (day == 6) {d =«суббота»}

if (day == 7) {d =«воскресенье»}

month = calendar.getMonth ();

if (month == 0) {m =«января»}

if (month == 1) {m =«февраля»}

if (month == 2) {m =«марта»}