Евгений Мухутдинов - Как сделать свой сайт и заработать на нем. Практическое пособие для начинающих по заработку в Интернете
Здесь можно купить и скачать "Евгений Мухутдинов - Как сделать свой сайт и заработать на нем. Практическое пособие для начинающих по заработку в Интернете" в формате fb2, epub, txt, doc, pdf. Жанр: Руководства, издательство Издательство «Питер»046ebc0b-b024-102a-94d5-07de47c81719, год 2012. Так же Вы можете читать ознакомительный отрывок из книги на сайте LibFox.Ru (ЛибФокс) или прочесть описание и ознакомиться с отзывами.
Название:
Как сделать свой сайт и заработать на нем. Практическое пособие для начинающих по заработку в Интернете
Автор:
Издательство:
неизвестно
Жанр:
Год:
2012
ISBN:
978-5-459-01666-6
Скачать:
Вы автор?
Книга распространяется на условиях партнёрской программы.
Все авторские права соблюдены. Напишите нам, если Вы не согласны.
Все авторские права соблюдены. Напишите нам, если Вы не согласны.
Как получить книгу?
Оплатили, но не знаете что делать дальше? Инструкция.
Описание книги "Как сделать свой сайт и заработать на нем. Практическое пособие для начинающих по заработку в Интернете"
Описание и краткое содержание "Как сделать свой сайт и заработать на нем. Практическое пособие для начинающих по заработку в Интернете" читать бесплатно онлайн.
Данная книга является прекрасным практическим руководством для начинающих по созданию, раскрутке и монетизации сайтов. Уже в процессе знакомства с изданием читатели смогут создать свой первый сайт, не потратив на это ни копейки. Пользователи, имеющие свои веб-проекты, наверняка найдут много нового во второй части книги, посвященной продвижению сайта и заработку на нем.
В издании освещаются все основные этапы создания сайтов и получения дополнительного дохода в сети Интернет: поиск идеи интернет-проекта, выбор домена и хостинга, создание сайта, его раскрутка и продвижение в поисковых системах, получение дохода при помощи контекстной рекламы, платных загрузок, партнерских программ и других способов.
Если вы хотите получать стабильный ежемесячный дополнительный доход с помощью своего сайта, затратив при этом минимум усилий и материальных затрат, эта книга для вас.
В нашем случае в контейнере <body></body> находятся шесть контейнеров, первым из которых является <h1></h1>, а последним – <h6></h6>. Это заголовки различных уровней, самый крупный из которых – hi. Как правило, при создании веб-страниц применяются только три первых заголовка, то есть hi, h2 и h3.
Внимание!
Никогда не оставляйте контейнер <title></title> пустым или не отражающим содержание страницы. В первую очередь на «титул» обращает внимание поисковый робот, пытаясь понять, какая информация размещена на странице. Несоблюдение этого правила, пожалуй, худшее, что можно сделать применительно к оптимизации сайта для поисковых машин.
Теперь можно просмотреть результат нашей работы в браузере. Для этого необходимо сохранить созданный документ как веб-страницу, то есть расширение файла должно быть .htm либо .html. Для этого заходим в меню Файл и выбираем команду Сохранить как. В появившемся окне в поле Имя файла указываем полное имя файла, в раскрывающемся списке Тип файла выбираем вариант Все файлы (рис. 3.8). Остается лишь нажать кнопку Сохранить.
Рис. 3.8. Сохранение кода в виде веб-страницы
Мы дали файлу имя proba_pera.htm. Обратите внимание, что оно набрано на латинице и вместо пробела указан знак нижнего подчеркивания. Всегда следуйте этому правилу при именовании файлов, предназначенных для размещения в Интернете. В противном случае есть большая вероятность того, что файл не удастся загрузить на сервер.
После сохранения файла как HTML-документа он будет открываться браузером, установленным в системе по умолчанию. В нашем случае это Google Chrome, который отобразил заголовки шести уровней (рис. 3.9).
Рис. 3.9. Отображение заголовков шести уровней в окне браузера
Обратите внимание, что в заголовке окна браузера отображается надпись Пробная страница, то есть содержимое «титула». Теперь начнем немного менять нашу пробную страницу, добавляя и удаляя элементы.
Использование изображений
Как мы уже сказали выше, при создании сайтов обычно используются изображения трех форматов: JPG (JPEG), GIF и PNG. Мы ограничимся только JPEG-файлами.
Поскольку изображения – очень значимый элемент для сайта, то постараемся провести с ними более масштабный эксперимент. На нашу вебстраницу мы вставим дважды одно и то же изображение, но храниться оно будет в различных местах.
Примечание
Изображение, которое мы используем для примера, можно загрузить, пройдя по ссылке www.pcbee.ru/wp-content/uploads/2011/08/mfu_0.jpg. Сохраните это изображение на Рабочем столе под именем mfu_0.jpg.
Для вставки рисунков используется тег <img src="URL">, где URL – это адрес картинки.
Для изменения нашей страницы необходимо открыть HTML-файл в Блокноте. Для этого щелкаем на значке файла правой кнопкой мыши и выбираем команду Открыть с помощью → Блокнот. Далее изменим текст согласно образцу (рис. 3.10).
Рис. 3.10. Добавление в HTML-код ссылок на изображения
Первое изображение хранится на сервере в Интернете, а второе – на Рабочем столе вместе с веб-страницей. Просматривая страницу в окне браузера, мы убеждаемся, что картинки исправно отображаются (рис. 3.11).
Рис. 3.11. Одинаковые файлы с изображениями, добавленными на веб-страницу, находятся в разных местах
В первом случае используется абсолютная ссылка, а во втором – относительная. Чтобы понять разницу между ними, перенесем файл с веб-страницей с Рабочего стола в папку Мои документы и снова откроем страницу в браузере. Второй рисунок не отображается (рис. 3.12).
Рис. 3.12. Второй рисунок не отображается, так как HTML-страница была перемещена в другую папку
Причина заключается в том, что браузер «пытается найти» файл с изображением в той же папке, где находится веб-страница, но там его нет. Наверняка подобную картину вы видели на некоторых сайтах. На своих сайтах необходимо избегать проблем с отображением рисунков.
Что делать, если рисунок не отображается?
• Проверить, есть ли это изображение по указанной в HTML-коде ссылке.
• Посмотреть, правильно ли указан путь к картинке.
• Проверить, правильно ли указано имя файла. К примеру, вместо названия файла name.jpg вы могли написать name.jpeg.
Нелишне вспомнить такое определение из курса информатики: полное имя файла – это путь к файлу вместе с именем файла. В случае с абсолютной ссылкой указывается именно полное имя файла, и даже если веб-страница будет перемещена, файл будет найден (если, конечно, он не удален). В случае с относительной ссылкой путь к файлу указывается относительно того каталога, где находится веб-страница.
Внимание!
Главное, что вы должны понять из этого примера, – в действительности никаких изображений на веб-странице нет – есть только ссылки на эти изображения и указание на то, в каком месте вебстраницы и как они должны отображаться.
Если проводить аналогию с текстовым редактором типа Microsoft Word, то там мы, как правило, внедряем изображения в документ, то есть они реально присутствуют в текстовом файле. Однако при использовании Word возможен такой вариант вставки изображения, как на веб-странице. Иначе говоря, картинка будет отображаться в тексте, но файл с ней будет храниться отдельно от документа. Если удалить файл с изображением, то картинка перестанет отображаться и в документе Word.
До сих пор мы не использовали атрибуты тегов, с помощью которых можно менять свойства объекта, соответствующего тегу. Для начала рассмотрим такие атрибуты тега <img>, как alt, width и height.
• alt – позволяет добавлять к картинке так называемый альтернативный текст. Если в браузере отключить показ картинок (это часто приходилось делать во время коммутируемого доступа к Интернету, чтобы ускорить загрузку веб-страниц), то вместо картинок можно увидеть текст, который дает пользователю понять, что изображено на рисунке. На данный момент альтернативный текст более важен не для удобства пользователей, а для обеспечения возможности поиска по картинкам, как это делают современные поисковые сервисы.
• width и height – если вы немного знаете английский язык, то уже догадались, что речь идет о ширине и высоте изображения. Пример выше показывает, что браузер и без этих атрибутов корректно отображает картинки. Но, как и в случае с тегом alt, нам необходимо подыграть поисковым сервисам, которые при выполнении поиска по картинкам предоставляют пользователям возможность указать размер изображения. К примеру, Google позволяет искать изображения не только по таким критериям, как большие, средние, маленькие, но и по точному размеру в пикселах. Более того, есть возможность указать тип изображения: цветное или черно-белое (рис. 3.13).
Рис. 3.13. При поиске изображений Google позволяет указывать различные параметры рисунка
Как вы уже, наверное, догадались, необходимую информацию для подобного поиска Google берет из атрибутов width и height. Соответственно, при создании сайтов было бы неразумно отказаться от их использования.
Сейчас мы применим указанные выше атрибуты на нашей тестовой странице. Нужно изменить HTML-код согласно листингу 3.1.
Листинг 3.1. Использование атрибутов alt, width и height <html><html>
<head>
<title>МФУ для дома</title>
</head>
<body>
<h1>МФУ для дома</h1>
<img src="http://pcbee.ru/wp-content/uploads/2011/08/mfu_0.jpg"
alt="МФУ для дома фото" width="200" height="200">
<img src="mfu_0.jpg" alt="МФУ для дома фото" width="200"
height="200" >
</body>
</html>
Теперь можно посмотреть, какие изменения произошли на веб-странице. После использования атрибута alt появился альтернативный текст, а добавление атрибутов width и height привело к появлению рамки, показывающей размер изображения (рис. 3.14).
Рис. 3.14. Результат использования атрибутов alt, width и height
Теперь пришла пора немного рассказать об использовании таблиц. Но перед тем как продолжить, вернем нашу страницу на Рабочий стол, чтобы отображались обе картинки.
Использование таблиц
Работая с текстовыми редакторами, мы не раз использовали таблицы, чтобы, к примеру, более наглядно представить числовую информацию. В сайтах у таблиц изначально было несколько другое предназначение: размещение элементов веб-страницы по своим местам (позиционирование). Иными словами, в ячейки таблицы помещались определенные элементы: меню сайта, заголовок, картинки, текст и т. д. Иногда границы делались невидимыми, и при просмотре веб-страницы пользователь видел лишь результат верстки с помощью таблицы, даже не догадываясь о ее существовании.
На данный момент использование таблиц для верстки считается вчерашним днем, но, как бы то ни было, они применяются и наверняка будут применяться еще долго. Дело в том, что использование таблиц – быстрореализуемый вариант, когда тот или иной элемент веб-страницы не получается правильно разместить другими способами.
На Facebook
В Твиттере
В Instagram
В Одноклассниках
Мы Вконтакте
Подписывайтесь на наши страницы в социальных сетях.
Будьте в курсе последних книжных новинок, комментируйте, обсуждайте. Мы ждём Вас!
Подписывайтесь на наши страницы в социальных сетях.
Будьте в курсе последних книжных новинок, комментируйте, обсуждайте. Мы ждём Вас!
Похожие книги на "Как сделать свой сайт и заработать на нем. Практическое пособие для начинающих по заработку в Интернете"
Книги похожие на "Как сделать свой сайт и заработать на нем. Практическое пособие для начинающих по заработку в Интернете" читать онлайн или скачать бесплатно полные версии.
Понравилась книга? Оставьте Ваш комментарий, поделитесь впечатлениями или расскажите друзьям
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
Отзывы о "Евгений Мухутдинов - Как сделать свой сайт и заработать на нем. Практическое пособие для начинающих по заработку в Интернете"
Отзывы читателей о книге "Как сделать свой сайт и заработать на нем. Практическое пособие для начинающих по заработку в Интернете", комментарии и мнения людей о произведении.