Секреты создания сайта (хостинг).

Секреты создания сайта (хостинг).

1.Статья – Что такое хостинг сайтов.

2.Видеоурок – Регистрация хостинга.

3.Секрет вебмастера. Сервисы онлайн-перевода.

4.Начало HTML – Оформление текста.

ЧТО ТАКОЕ ХОСТИНГ САЙТОВИЛИ КАК РАЗМЕСТИТЬ ВЕБ-САЙТ НА СЕРВЕРЕ.

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

Существует несколько способов:

Адрес в интернете.

Компьютер, подключенный к интернету имеет свой уникальный номер IP-адрес, который состоитиз чисел, разделенных точками.

С помощью IP-адреса в интернете можно найти любой компьютер. Если ваш компьютер постоянно подключен к интернету, то IP-адресу вас уже есть. Чтобы узнать его, нужно набрать в строке поискавашего браузера -«мой IP» – поиск и вы увидите результат:

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

ВИРТУАЛЬНЫЙ СЕРВЕР НА КОМПЬЮТЕРЕ

Зачем вообще нужен сервер?

Браузер способен показывать только статичные html-страницы, а при создании современного сайта используются, кроме html-PHP, Perl, MySQL, JavaScript, и поэтому, без специального сервера не обойтись. Но вести сайт в Интернете с помощью этого сервера практически невозможно. Я не буду описывать все технические препятствия этому, одним является невозможность работы компьютера круглосуточно в течении длительного времени.

Виртуальный сервер на компьютере – это испытательный полигон вебмастера, здесь Вы настраиваете сайт, проверяете работу скриптов, новых шаблонов(тем), плагинов и других расширений, в общем всего, что Вы хотите увидеть на сайте. И только проверив, вы можете спокойно закачивать все на «настоящий» хостинг. Наиболее известной в Рунете программой является - Джентльменский набор вебмастера DENWER.

Denwer устанавливается на Ваш компьютер, занимает мало места, портативен (может храниться на флешке или CD-DVD).

РЕАЛЬНЫЙ ХОСТИНГ САЙТОВ.

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

В первую очередь это устраивающий Вас тарифный план: место на диске, трафик и цена. Во-вторых качество работы сервиса и т. д…

В Интернете существует отличный сервис Хостобзор, который постоянно анализирует работу хостинг-провайдеров.

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

2.СЕКРЕТ ВЕБМАСТЕРА. СЕРВИСЫ ОНЛАЙН-ПЕРЕВОДА

Сервисы онлайн-перевода

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

Для этого существует два сервиса.

Сервис «Google Translate» позволяет переводить целый сайт, открытый в этот момент в браузере. Откроем сайт сервиса, прокрутим вниз и найдем кнопку нужного нам языка – зажмем его мышкой и не отпуская перетащим на панель закладок нашего браузера. Все! Теперь, если нужно перевести сайт, нужно просто кликнуть по нашей кнопке.

Онлайн-переводчик «Промт» предлагает перевод, кроме сайтов, любого текста, книг и т. д. Для перевода без ограничений необходимо зарегистрироваться. Для удобства можно поставить закладку на сайт рядом с кнопкой Google-Translate. Сервис очень удобен, когда необходимо перевести небольшой отрывок текста или одну-две фразы. Использую эти сервисы для вас не будет языковых барьеров.

3.НАЧАЛО HTML. ОФОРМЛЕНИЕ ТЕКСТА.

Продолжим работу с тегами оформления текста.

Заголовки текста формируются с помощью парных тегов view source print?

1 <H[1-6]>.....</H[1-6]>

Например пишем:

<h1>Заголовок1</h1>

<h2>Заголовок2</h2>

<h3>Заголовок3</h3>

<h4>Заголовок4</h4>

<h5>Заголовок5</h5>

<h6>Заголовок6</h6> получаем:

Заголовок1

Заголовок2

ЗАГОЛОВОК3

ЗАГОЛОВОК4

Заголовок5

Заголовок6

Выделение текста цветом формируется с помощью тега [span] с добавлением параметра [style]. Параметр [style] может принимать несколько значений – цвет[color], фон[background],рамка[border] и т. д.

<span style="color:blue;">текст...текст</span> текст…текст

<span style="background:blue; color:yellow;">текст...текст</span> текст…текст

Цвет задается с помощью цветовой константы (название цвета на английском языке) - «black»,"yellow", "red", "blue", "green" и т. д. или в виде его шестнадцатеричного его значения – [#000000 - черный], [#ffff00-желтый],[#0000ff-синий] и т. д. Выделение текста цветным фоном Если надо выделить фон под текстом на одной строке – пишем так view source print?

1 <span style="background:#0000ff;">текст...текст</span> получаем: текст…текст

Если надо выделить фоном целый абзац или большую часть текста используют тег [div..../div] с параметром [style].

View source print?

1 <div style="background:yellow;">

2 текст текст текст текст текст текст

3 текст текст текст текст текст текст

4 </div> текст текст текст текст текст текст текст текст текст текст текст текст view source print?

1 <div style="background:#ffff00;">

2 текст

3 текст

4 </div> текст

Цитата или комментарий служит для привлечения внимания к тексту. Здесь приводится готовый код, который вы можете изменить по своему усмотрению view source print?

1 <div style="border-left: 3px #606080 solid; padding: 3px;

2 padding-left: 10px; background: #D8D9D3;">

3 Цитата или комментарий служит для привлечения внимания к тексту.

4 </div>

Цитата или комментарий служит для привлечения внимания к тексту. Врезка - интересная фишка для привлечения внимания к тексту. Код врезки похож на код цитаты, но с применением параметра [float]. Параметр может принимать значения:

[float-none] – текст не обтекает(по умолчанию)

[float-right] – текст обтекает слева

[float-left] – текст обтекает справа

Готовый код врезки (Можете изменять для создания собственного стиля) view source print?

1 <div style="float: none; width: 200px; padding: 5px;

2 margin: 10px; border-left: 4px double navy; background: #D8D9D3;">

3 Это пример врезки. Это пример врезки.

4 Это пример врезки. Это пример врезки.</div>


Карта сайта


Информационный сайт Webavtocat.ru