Здравствуйте!
Приветствую Вас на курсе для начинающего веб-мастера,надеюсь по окончании курса Вы сможете сделать свой сайт и сможете зарабатывать в сети намного больше,чем зарабатывали до этого момента.
Не стану утверждать, что Вы приняли правильное решение, решив попробовать свои силы на нашем курсе, т.к. глубоко убежден, что решение было не правильное, а сверх правильное и не побоюсь слова: МУДРОЕ.
Прежде всего, давайте проверим настройку нашего ПК.
Открываем любое окно, к примеру, МОИ ДОКУМЕНТЫ, выбираем в верхнем меню СЕРВИС – СВОЙСТВА ПАПКИ и во вкладке ВИД находим надпись «Скрывать расширения для зарегистрированных типов файлов»
- Если галочка стоит, то снимаем её и нажимаем Ok.
Что такое зарегистрированные типы файлов и чем они отличаются от незарегистрированных - нас не интересует. Пытливые умы найдут подробности в справке Windows, а к занятиям нашего курса сие - отношения не имеет
Достаточно убедиться, что галочки напротив "Скрывать расширения зарегистрированных типов файлов" НЕТ и забыть про всё это.
После проделанного, мы видим полные имена файлов и легко различаем, например index.html с index.htm, которые, при наличии этой галочки отображались бы одинаково, как index.
Расширение htm пришло из старых Операционных Систем, где все расширения состояли из 3-х символов. Принципиального значения между htm и html нет, но мы, в занятиях, будем пользоваться только файлами .html
К делу!
Создаём в удобном для нас месте жесткого диска новую папку, пусть она будет называться WWW. В этой папке создаем текстовой документ (блокнот). Пишем в него следующее:
<html>
<head>
<title>Автор страницы Саня Питерский(fktrc80)</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
</head>
<body>
Так отображается текст на моей первой странице
</body>
</html>
Далее обращаемся в меню Файл - Сохранить как - и сохраняем в папку WWW наш файл как index.html.
Открываем папку WWW и открываем файл index.html.
В открывшемся браузере наблюдаем своё первое творение.
Теперь по порядку, что и зачем мы писали:
Тэги – команды языка HTML, заключенные между знаками < и >
Обратите внимание, что есть парные, и не парные тэги. В этом есть логика.
Смотрите:
<html> сообщает, что начинается документ на языке HTML
</html> - конец кода HTML
аналогично
<head> </head> - так называемый хедер – всё находящееся между тэгами - невидимая часть документа, содержащая информацию для компьютера.
<title> </title> Содержит название данной страницы – отображается с верхней синей полосе браузера.
Далее - тэг посложнее, как видите, тэг непарный:
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
В нем содержится информация о содержимом дальнейшего кода страницы, а именно:
Страница для передачи по протоколу гипертекста http , содержит формат text/html,
написана в кодировке windows-1251 т.е. windows-кириллица.
Зона <body> </body> - тело страницы, т.е. отображающаяся в браузере часть.
Всё, что мы напишем и изобразим в этой зоне увидит посетитель нашей страницы.
Итак, сейчас мы рассмотрели обязательные тэги, которые крайне не желательно игнорировать.
Плохое заполнение этих тэгов, для индексирующих страницу роботов, выглядит не лучше чем безграмотная и небрежно написанная записка.
ПОМНИТЕ!
Оценивая вашу страницу, поисковик, оценивает всё её содержимое, по хитрому алгоритму он подсчитывает её минусы и сравнивает с похожими по тематике страницами.
Таким образом, выше всех в поисковом запросе будет страница, содержащая меньшее количество минусов.
Вышеописанный минус не самый страшный при отсутствии других, о которых поговорим позже, обсуждая SEO - оптимизацию по поисковому запросу, но всё же, нам не нужны лишние минусы!
Перейдем к практическому занятию. Регистрируемся на www.narod.yandex.ru
Создаём свой домен вида mysite.narod.ru - получаем свой URL (адрес страницы типа http://mysite.narod.ru) логин, пароль и возвращаемся обратно к этому письму, с материалом занятия курса Номер РАЗ!
Получилось?
Как видите, не так уж и сложно!
Если Вы уже умеете класть файлы на сервер, то делайте это привычным для Вас способом, а если нет, то предлагаю следующее:
Откройте программу ПУСК->Программы->Стандартные-> Блокнот и сделайте такую запись, вставив вместо слов наш-логин и наш-пароль свои, не забыв отделить логин от пароля двоеточием, а пароль от названия FTP сервера соб@чкой:
ftp://наш-логин:наш-пароль@ftp.narod.ru
На всякий случай напомню, что ftp – протокол передачи файлов а ftp.narod.ru – имя сервера, на котором скоро появится наш файл, который можно будет увидеть, набрав в адресной строке браузера
http://наш-логин.narod.ru
Запомните слова ХОСТИНГ и ХОСТЕР. В нашем случае хостером является владелец бесплатного ресурса www.narod.ru, а хостингом - участок на жестком диске его копмьютера-сервера, который он любезно предоставляет в наше пользование.
Написали?
Тогда выделим эту запись мышкой и скопируем в буфер обмена. Желающие могут это сделать традиционно, вызвав контекстное меню правым щелчком мыши, но я рекомендую копировать в буфер размеченную область сочетанием клавиш Ctrl+C, а вставлять из него сочетанием Ctrl+V. Запомнить не сложно С-копировать, V- вставить.
Итак, давайте вставим эту запись в адресную строку нашего браузера,
Внимание! "Наш браузер" - это стандартный для Windows Internet Explorer любой версии, если Вы пользуетесь другим, то на время занятий рекомендую назначить основным именно его, если не знаете как, или по другим причинам не можете этого сделать, пользуйтесь любым окном Windows как браузером, например, откройте окно Мой компьютер и в адресной строке, вместо слов "Мой компьютер" впишите "ftp://..."; или "http://...";
В данном случае:
ftp://наш-логин:наш-пароль@ftp.narod.ru |
жмем на Enter и наблюдаем, как открывается окошко очень похожее на то, которое мы открываем для доступа к файлам нашего ПК, только в адресной строке отобразилось не C:\WWW, а ftp://ftp.narod.ru
Добавим в избранное эту страницу.
Рекомендую в избранном создать папку под именем FTP и добавить нашу страницу именно в неё. Далее, снова нажав на избранное, выбрать эту, только что созданную ссылку-ярлык правой кнопкой мыши и в контекстном меню выбрать СВОЙСТВА.
В открывшееся окно вставить вместо ftp://ftp.narod.ru (чтоб каждый раз не вводить логин и пароль) внедрить в адресную форму содержимое нашего буфера обмена - ftp://наш-логин:наш-пароль@ftp.narod.ru
Теперь, нажав на эту ссылку в избранном, мы всегда и сразу попадаем на свой хостинг, где лежат файлы нашего сайта.
Далее этим ftp-окном можно пользоваться почти аналогично другим окнам у нас на ПК - копировать и вставлять, перетаскивать мышью и удалять файлы.
Это окно выходит на наш кусочек пространства жесткого диска сервера ftp.narod.ru
Теперь откроем нашу папку WWW и отрегулируем размеры окон так, чтобы на экране было видно содержимое обеих папок. т.е. WWW и ftp://ftp.narod.ru
Далее, легким движением руки, перетаскиваем из WWW файл index.html в ftp://ftp.narod.ru
Если там такой файл уже существует, подтвердите его замену.
Заходим на ваш сайт, набрав в браузере его адрес:
http://ваш-логин.narod.ru
Не получилось?
Да, бывает...
Попробуем иначе, набираем в адресной строке браузера ie от Microsoft - ftp.narod.ru
Если окно с формой ввода логина и пароля само не появилось, а выскочило нечто вроде "у вас нет доступа" - скажите этому окну "ОК", нажмите правую кнопку мыши и в выпавшем контекстном меню выберите "Войти как".
Далее в появившемся окне вводим логин и пароль.
Если и это не помогает, то идём на www.narod.yandex.ru, вводим в форму в левом верхнем углу свой логин и пароль, входим в "личный кабинет" и выбираем ссылку "Загрузка файлов на сайт" - соответственно, загружаем наш файл index.html.
|
Вуаля-шеньки!
Позвольте мне, в этот волнительный и судьбоносный момент, первым пожать Вашу натруженную манипулятором экранного курсора руку!
Переходим к самостоятельной работе.
Впишите в область тэга
<title>Автор страницы (ваше ИМЯ)</title>
Для этого, в папку www вашего ПК откройте двойным щелчком файл index.html, в открывшемся браузере выберите в меню ВИД – Просмотр HTML-кода, внесите изменения в открывшемся документе и далее ФАЙЛ – сохранить, хотя я бы нажал на клавиши Ctrl+S
Согласитесь, так быстрее и удобнее. С- копировать V- вставить S – сохранить.
Проверим изменения – нажимаем на кнопочку в меню браузера ВИД ->ОБНОВИТЬ (я бы шлепнул пальцем по F5) и смотрим, что белым по синему написано в самом верху нашего окошка.
Это еще не всё.
Теперь, выполните задание.
Внесите в тело документа (тэг <body></body>) изменение, добавив туда свой текст. Пусть это будет текст о Вас: представьтесь посетителям страницы, расскажите о Ваших планах, желаниях, ну и о впечатлении от нашего первого занятия.
Далее по известной технологии сохраняем изменения в файле index.html и переносим его на сервер.
Проверяем, внесены ли изменения в нашу страничку непосредственно на нашем сайте ВИД ->ОБНОВИТЬ или F5.
Чтобы о вашем сайте знали не только мы с вами и наши знакомые, надо рассазать Яндексу, что, мол... "Есть новый сайт! Иди, проиндексируй его и сохрани в своей базе." Для этого зайдите на http://webmaster.yandex.ru и заполните несложную форму.
Начало есть.Двигаемся дальше.
Итак, сделав РАЗ – делай и ДВА-с!
А кому сейчас легко – только не нам… вебмастерам!
Давайте посмотрим ещё раз на наше творение, на наш www.ваш_логин.narod.ru
Печальное зрелище, не правда ли? А кто в этом виноват?
Только не Вы, коллега. Во всем виноват Cаня Питерский и создатели HTML!
Разве Вы знали, что форматирование текста будет полностью игнорироваться браузерами?
Зато теперь - знаете, и разных там вопросов, мол, зачем учиться форматированию текстов, больше возникать не будет. Именно с этого начинается большинство учебников HTML, внося в мысли обучаемого тоску, отбивая напрочь всякое желание двигаться дальше.
А знаете ли Вы(!), что для истинного вебмастера отформатировать вручную текст, это как Вам... - вкусно поесть? Вы уже готовы разделить со мной это удовольствие?
Начнем, пожалуй, и... приятного аппетита!
Возьмите мышку в правую руку, обоприте голову на левую,
а теперь, не спеша, с чувством, с толком, с расстановкой, известным уже для Вас способом, откройте программу блокнот и….
<html>
<head>
<title>Ваше Имя Отчество Фамилия. Задание №2</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
</head>
<body>
А сюда, мы будем, строчка за сточкой, вставлять тэги и текст
</body>
</html>
Не стану занудствовать и требовать, чтобы Вы не пользовались буфером обмена для переноса этих тэгов, а привыкали писать их, шлепая пальцами по клавиатуре.
Моя цель – накормить, а не замучить.
Копируйте! – это разумно, быстро и просто.
Начнем с самого "вкусного" тэга - <h1> </h1>, назначение его - заголовок.
У него есть разновидности от <h2> </h2> до <h6> </h6>
Самый крупный заголовок <h1>, соответственно, самый мелкий <h6>
Под тэгом <body> размещаем запись, не забыв свергнуть от туда Саню Питерского и... короновать себя-любимого.
<h1>Персональная страница Сани Питерского</h1>
Сохраняем файл как 02.html, и откроем его в браузере…
Ну и как?
Любите ли Вы теперь тэг <h1>, как обожают его поисковые роботы?
Скажу по секрету, что особенно ценится этот деликатес, если он подается вместе с тэгом <title>, когда в содержимом обоих есть одинаковые слова, т.е. совпадения.
Иными словами, название страницы и тема, которая рассматривается на этой странице, озаглавлена фразой с близким смысловым содержанием.
А что будет, если мы сойдем с ума и всю страницу выполним в одних тэгах <h1>?
Думаю, что робот поморщится, плюнет и уйдет, запомнив наш URL, как антисанитарное место обитания спам-страниц.
А также, не рекомендуется допускать полного совпадения содержимого <title> и <H1>.
Посмотрите, как получилось у нас на странице – это правильная пропорция.
А что там у нас на второе?
- На второе у нас тэг <p>!
Как в итальянской кухне не возможно представить себе обед без макарон, так и страницу HTML невозможно представить без тэга, определяющего абзац.
Грустно, если его вообще нет на странице.
Итак, пробуем, <p> </p> впишите в тэг свои впечатления от трапезы, вставьте полученную запись под строку с <h1> и, насладившись видом обновленной веб-страницы, перейдем к следующему пункту меню.
STOP! Чуть не забыл сказать, что очень не плохо будет, если в содержимом тэга <p> будут встречаться слова, которые уже содержались в ранее рассмотренных нами тэгах, сие для наших "гурманистых" роботов будет означать, что смысловое содержание текста соответствует изначально заявленной нами тематике. В противном случае нас могут принять за мошенников или горе - кулинаров.
А компот? Да, без компота никак невозможно, но немного задержимся, дабы в полной мере насладиться послевкусием известных нам уже тэгов.
По умолчанию, весь текст в наших тэгах будет изображаться с левого края страницы.
А что, если мы хотим разместить текст в центре или даже по правому краю?
Посмотрим на дополнения к известным нам тэгам?
Ряд команд для выравнивания:
<h1 align="left">Выровнять заголовок по левому краю</h1>
<h2 align="right"> Выровнять заголовок по правому краю</h2>
<h3 align="center">Выровнять заголовок по центру</h3>
<h4 align="justify">Выровнять заголовок равномерно</h4>
<p align="left">Выровнять абзац по левому краю</p>
<p align="right">Выровнять абзац по правому краю</p>
<p align="center">Выровнять абзац по центру</p>
<p align="justify">Выровнять абзац равномерно</p>
Для придания правильной формы, мы используем внутри текста один маленький, но очень гордый непарный тэг <br> - переход на следующую строку.
<h1 align="center"> Выровнять заголовок<br> по правому краю</h1>
<p align="right">Выровнять абзац <br> по правому краю</p>
A вот теперь, и компот!
А не приукрасить ли нам свой текст?
Выбрать шрифт, выделить ключевые фразы пожирнее, или с наклоном, не подчеркнуть ли самое важное? Роботам до этого дела мало, хотя и не всем, но не только же для них мы стараемся!
<b>жирный</b>
<i>наклонный</i>
<u>подчеркнутый</u>
<b><i><u>
жирный, наклонный, подчеркнутый - одновременно.
</u></i></b>
Обратили внимание, что тэги закрываются в обратной последовательности?
Да, так всегда и закрывают.
Шрифт, он же font
Вставьте на свою страницу этот код:
<font size="7" >Р</font>
<font size="6" >А</font>
<font size="5" >З</font>
<font size="4" >М</font>
<font size="3" >Е</font>
<font size="2" >Р</font>
<font size="1" >Ш</font>
<font size="2" >Р</font>
<font size="3" >И</font>
<font size="4" >Ф</font>
<font size="5" >Т</font>
<font size="6" >О</font>
<font size="7" >В</font>
Обратили внимание, что браузеру совершенно безразлично, что в исходнике мы расположили всё в столбик?
Браузеру не только это безразлично. Он ещё имеет наглость игнорировать лишние пробелы и только (пробел) заставит его нас слушаться.
Посмотрите, как будут выглядеть следующие две записи:
<p align="center">
<font color="red">
Здесь игнорируются пробелы!
</font>
</p>
<p align="center">
<font color="blue">
А здесь
не игнорируются
пробелы!
</font>
</p>
Ваш зоркий глаз уже обратил внимание на то, как мы управляем цветом шрифта? Похвально!
Давайте поговорим о цветах на следующем занятии, а сейчас у нас по плану... десерт!
Ну, какой же пир без десерта, а какая веб-страница без ссылок?
Не об этом ли лакомстве мы все так мечтали?
Держите тэг <a> </a> и не расставайтесь с ним больше никогда!
Вот как выглядит ссылка для внешней страницы:
<a href="http://www.zarabotaibabok.ucoz.ru/">Заработок в сети интернет</a>
Не откажите в любезности, разместите эту ссылку на своей странице index.html!
Так выглядит ссылка на внутренние страницы нашего сайта:
<a href="index.html">Персональная страница Сани Питерского(fktrc80) </a>
<a href="02.html">Саня Питерский. Задание №2</a>
Вот так, простенько и со вкусом мы можем вставить наши ссылки в известные нам тэги:
<p align="center">
<a href="02.html">
Саня Питерский(fktrc80). Задание №2
</a>
</p>
Единственное пожелание: доставьте удовольствие роботам – по возможности, не используйте в ссылках случайный, ничего не говорящий о тематике текст. Обратите внимание на мои примеры и заметьте, что текст ссылки содержит слова, которые содержатся на странице, на которую будет выполнен переход с нашей ссылки.
И последнее на сегодня:
Хотите, чтоб посетитель мог написать Вам письмо?
<a href="mailto:fktrc80@rambler.ru ">fktrc80@rambler.ru </a>
или так:
<a href="mailto:fktrc80@rambler.ru ">Написать мне письмо</a>
На всякий случай, уточню, что вместо моего e-mail надо вставить Ваш, а вместо черного содержимого тэга можно писать всё, что угодно.
Объявляется перерыв, после которого мы, со свежими силами выполним небольшое задание.
Помните, как мы назвали файл? - 02.html
Это потому 02, а не 01, что на 01.html у меня есть некие планы.
А именно: откройте index.html - ВИД -> Просмотр HTML-кода и сохраните файл как 01.html
Мы же не станем оставлять нашу главную INDEX-страницу в таком плачевном виде, хотя сейчас нам её трогать ещё рановато.
Итак, теперь у нас есть страница 01.html – наша самая первая страница, и мы создали 02.html – наша самая вторая страница.
1. Так вот, в конце нашей первой страницы самостоятельно вставьте 2 ссылки:одна ссылка на страницу index.html, а другая на 02.html.
2. На страницу 02.html внедрите соответственно ссылки на index.html и на 01.html
3. В надежде, что параллельно с изучением занятия, Вы выполняли за мной все действия, я не отвлекался на напоминания о том, что все действия надо выполнять и сохранять. Проверьте, все ли упражнения зафиксированы на нашей странице 02.html
Все получилось???Тогда идем дальше.....Для продолжения жмем сюда>
