Эй! Спасибо, что решили посмотреть на тему! Осмотритесь вокруг
и подпишитесь на RSS feed чтобы узнавать обо всех обновлениях. До встречи!

Архив Март, 2018

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

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

Интерактивная таблица цветов

Нажмите на квадратики (ячейки) и сверху над этой таблицей появится цвет и его код. Думаю что в использовании данной таблицы у вас не возникло трудностей. Если вам не хватает цветов, но то ниже представлен редактор цветов, где можно подобрать практически любой цвет. Здесь чтобы получить код цвета вам нужно нажать на цветовое поле в левой части редактора. При этом в правой части отобразится цвет и его значение. Чтобы изменить цветовую палитру нажимайте и перемещайте ползунок на вертикальной цветовой полосе, которая находится посреди редактора.

Чтобы узнать цвет по коду введите код в окно в нижнем правом углу и нажмите enter (вперед/поиск) и в редакторе отобразится ваш цвет. Так-же как вы наверное уже заметили цвет в редакторе так-же отображается в формате RGB.

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

Введите ваш цвет:

Редактор и таблица цветов представленные здесь взяты с сайта http://html-color-codes.info/. Так-же там есть и другие инструменты для визуального определения цвета и другое.

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

background-color: — устанавливает цвет фона, цвет можно указывать в любом поддерживаемом формате

background-image: — устанавливает фоновое изображение
background-position: — задает положение фона установленного с помощью background-image
background-repeat: — определяет как будет повторятся фоновое изображение Примеры:

background-color: #DCDCDC; — устанавливает цвет фона, в даном случае цвет #DCDCDC

background-image: url(images/fon.jpg); — фоновое изображение, которое будет повторятся если не перекрывает весь фон.
background-repeat: repeat-x; — фоновое изображение повторяется по горизонтали
background-repeat: repeat-y; — фоновое изображение повторяется по вертикали
background-repeat: no-repeat; — отменяет повторение изображения
background-repeat: repeat; — изображение повторяется по горизонтали и вертикали (обычно так по умолчанию) Можно так же записывать сокращенно

background:url(images/fon.jpg) no-repeat #ЕFFFF0; — указано фоновое изображение fon.jpg, указано что изображение не будет повторятся no-repeat, и указан цвет фона после изображения #ЕFFFF0, так-же цвет фона будет отоброжаться если изображение не доступно.

Основные теги для создания шаблона и ведения сайта Многие ошибочно думают что чтобы самому создать шаблон и писать сайт в блокноте, нужно знать html, php и прочее, но на самом деле это не так. Знать html конечно желательно, но совсем не обязательно, достаточно запомнить десяток тегов и общие принципы строения сайта. В большинстве случаев для создания и ведения обычного сайта или блога достаточно знать лишь основные теги, которые постоянно используются, а все другое можно всегда найти в интернете и применить. Так же можно скачать справочник html, CSS, чтобы если что, то он был всегда в быстрой доступности.

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

в этом теге на html странице заключается основная информация о странице. Краткое описание description, ключевые слова keywords, а также заголовок в теге title. Указывается кодировка страницы и др.

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

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

этот тег служит для группировки заголовков h1…h6, обычно применяется в шапке сайта, когда в тегах h1 и h2 заключен заголовок сайта и подзаголовок с кратким описанием содержимого сайта.

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

    и

  • .

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

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

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

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

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

    этот тег предназначен для обозначения изображений на странице.

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

    указывает и используется для вставки видеороликов и кодов видеоплееров на странице

    этот тег обозначает подвал сайта

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

    Основные теги для разметки текста

    эти теги для выделения заголовков в тексте.

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

    следующий тег

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


    служит для переноса строки, можно использовать подряд


    для переноса текста на несколько строк ниже

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

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

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

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

    При всей кажущейся сложности, для тех кто первый раз столкнулся с самостоятельным созданием своего сайта, вести и создать сайт совсем не сложно, для этого достаточно знать ~20 тегов, и знать как задавать для них стили в таблице stile.css. Создавать страницы самописного сайта очень быстро, достаточно скопировать шаблонную страницу, вставить текст статьи, вставить картинки и разметить заголовок и абзацы, и все, вписываем ключевые слова и загружаем страницу на сайт.

Теги HTML5

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

Теги и

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

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

Назначение html тегов


Язык разметки веб страниц html не только размечает содержимое и текст, но его теги так же являются семантическими. Другими словами названия контейнеров, в которых содержится информация, индексируются согласно сложным внутренним алгоритмам поисковых систем. Поисковые роботы знают что например в теге < header > размещается шапка сайта, в теге < footer >, так же они индексируют содержимое и других тегов. По этому без труда смогут отличить собственно контент от другой информации на странице, и в этом деле им нужно всячески помогать, то есть расставлять в разметке правильные теги чтобы в итоге страница правильно проиндексировалась и была выше в выдаче.

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

Язык разметки веб страниц html не только размечает содержимое и текст, но его теги так же являются семантическими. Другими словами названия контейнеров, в которых содержится информация, индексируются согласно сложным внутренним алгоритмам поисковых систем. Поисковые роботы знают что например в теге < header > размещается шапка сайта, в теге < footer >, так же они индексируют содержимое и других тегов. По этому без труда смогут отличить собственно контент от другой информации на странице, и в этом деле им нужно всячески помогать, то есть расставлять в разметке правильные теги чтобы в итоге страница правильно проиндексировалась и была выше в выдаче.

Тег

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

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

Пример создания блоков

Заголовок страницы

Самому блоку в данном случае в таблице стилей stile.css присваивается класс block1. Запись в таблице стилей должна начинаться с точки, примерно так .block1 {padding:10px ;margin:5px; width:220px; color:#778899; background-color:#fff ; border-radius:10px;} Как видно в стиле указаны отступы 10px и 5px, ширина 220px, цвет текста #778899, фон #fff, и скругление углов 10px. Так же стили для контейнера можно указать с помощью идентификатора. Тогда запись в таблице стилей будет начинаться с символа решотки # #block2 {padding:20px ;margin:0px; width:640px; color:#778899; background-color:#DCDCDC;}

Тег

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

Пример использования тега

заголовок страницы

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


Линия



Линия1

Линия2

Линия3

Результат Между этими двумя горизонтальными линиями может быть что угодно. Горизонтальную линию обычно применяют когда нужно визуально разделить или обозначить конец какой то части контента, Так же она часто помогает когда нужно отсечь блоки, которым назначено левое или правое позиционирование. Так же горизонтальную линию используют просто для красоты и дизайна. Примеры горизонтальных линий. Линия
Линия 1
Линия2
Линия3

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

Допустим вы уже разобрались на чем, где и как делать сайт. Придумали тематику сайта, и теперь осталось писать статьи. Статьи (контент) это основа сайта. Мало написать хорошую статью для людей, нужно еще помнить что эта статья будет индексироваться поисковыми роботами. Поэтому обязательно надо прописывать ключевые слова к статье, заголовок, и краткое описание, которое будет показываться в описании к сайту в поиске яндекса и google. Так же и сама статья должна содержать заголовок и несколько ключевых слов. При написании статьи важно писать для людей, но не забывать про поисковых роботов.

Что нужно знать чтобы сделать сайт Вся длинная цепочка создания сайта выглядит примерно так. Если вы пишите сайт в блокноте, то можно его сначала написать, желательно 20-30страниц по теме, чтобы сайт не был пустым. Потом покупаете домен и хостинг, размещаете сайт в интернете. Если вы хотите вести сайт на движке (WordPress, jomba,drupal и пр.) то сначала надо установить движок на хостинг, настроить его под себя ( подобрать тему, плагины), и можно наполнять сайт статьями, а домен купить можно и чуть посже.

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

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

Когда сайт пройдет «песочницу» и дорастет до взрослого сайта с посещаемостью от 300 посетителей в сутки, можно задуматься о манетизации. Так же в яндексе и google есть свои партнерские программы, там нужно подать заявку на участие своего сайта в программе, и если его одобрят, то вы сможете повесить на сайте рекламу и зарабатывать на кликах по ней. На самом деле рекламных сервисов в интернете очень много, и если сайт не примут, то есть множество других вариантов заработка.

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

Такими темпами в день можно писать 1-3 качественные статьи. Но у меня выходит в среднем одна статья в день, так как бывает я пишу и две-три статьи, а бывает и не одной за день. В зависимости от качества и тематики статей нужно написать для минимальной посещаемости 300 человек в сутки от 50 до 150 статей. Поэтому трудится над сайтом придется как минимум два месяца, а потом еще ждать пока он наберет популярность и вес в поисковых системах. На минимальный заработок с сайта стоит рассчитывать только спустя 4-6 месяцев, а то и больше. А минимальный заработок с 300 посетителей например на рекламе от google составляет около 2-3$ в сутки.

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

Как вы наверное знаете интернет сайты состоят из страниц, которые являются обычными текстовыми файлами, где информация заключена в различные теги. Теги указывают браузеру как отображать тот или иной элемент. Эти страницы (текстовые файлы) могут быть с различным расширением, но самые распространенные расширения html и php. Html расширение указывает на то что страница содержит html теги, а php это тоже самое, но php скрипты выполняются не в браузере, а на стороне сервера, а браузеру выдается уже обработанная страница. Так же страницы бывают статистические и динамические.

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

Пример кода обычной html страницы стандарта html5

Заголовок страницы, который показывается в верхней части браузера

Заголовок сайта

Краткое описание, подзаголовок сайта

  • раздел1
  • раздел2
  • раздел3
  • раздел4

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

заголовок

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

Теперь разберем что означают все теги на странице и зачем они нужны

сообщает браузеру что это документ html. Между тегом …… заключена служебная информация о странице, которая не видна пользователям. Заголовок страницы, который показывается в верхней части браузера Эта запись указывает что кодировка документа utf-8, так же у документа могут быть и другие кодировки, например windows-1251. Сейчас большинство сайтов использует кодировку страниц utf-8. Важно чтобы ваш текстовый редактор при сохранении сохранял файл в кодировке utf-8, если кодировки будут разные, то вместо слов на странице будут показываться иероглифы (крокозябры), которые никто не поймет. Запись указывает что стили для отображения всех контейнеров находятся в stile.css. Этот файл можно поместить в той же папке что и сам сайт, или в отдельной папке, тогда путь до файла будет другой это краткое описание страницы в выдаче поисковых систем, которое видят люди, поэтому их нужно заинтересовать чтобы они перешли именно на ваш сайт. ключевые слова, чтобы поисковые роботы знали по каким запросам показывать вашу страницу в поиске. …… здесь указывается заголовок страницы

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

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

Заголовок сайта

Краткое описание, подзаголовок сайта

  • раздел1
  • раздел2
  • раздел3
  • раздел4

Между тегом ……… помещается все содержимое сайта от шапки до подвала, он нужен для того чтобы задать потом в таблице стилей CSS размер тела страницы (ширину), задать фон и прочую красоту. Содержимое между тегом ……. указывает что это содержание страницы Тег …….. служит для группировки заголовков когда они отображают один и тот же смысл, поэтому два заголовка в шапке сайта заключены в этот тег.

……

и

………

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

    …..

и

  • ….
  • служат для группировки ссылок на разделы, навигации по сайту, им тоже задаются стили в таблице стилей stile.css

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

    Между тегом …….. размещается основное содержимое страницы, то есть сама статья Запись , это тег которому в таблице стилей присвоен стиль .saitbar для отображения. Тег указывает поисковым роботам что его содержимое отдельное и не связано с основным содержимым страницы. В этом теге обычно располагают боковую колонку, где можно сделать блок «последние записи» или вставить рекламу, сделать фото-галерею и пр. Тег …. секция для определенного содержимого, указывает что в нем заключено определенное содержимое, статья, новость, запись, пост, событие

    В этот тег служит для указания поисковым роботам что в нем лежит статья или запись в блоге, новость. Аналог тега , но если тег указывает секцию, то тег указывает роботам что здесь статья и именно ее нужно индексировать не вмешивать другие элементы вокруг. Запись в теге class=»tekstblok указывает что для article нужно применить стиль .tekstblok в таблице стилей stile.css

    Этот кусок кода служит для вставки картинок в статью. Тег указывает роботам что в нем лежит картинка или фото. описание, что изображено на картинке, не видно пользователям заголовок описание к изображению видно пользователям Этот код служит для вставки самой картинки описание, что изображено на картинке, не видно пользователям Здесь указывается описание к картинке которое будет видно если у пользователя отключен показ картинок в браузере alt=»……» >.

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

    Между тегом …… помещается содержимое подвала. Этот тег указывает поисковым роботам что это подвал и его содержимое не стоит учитывать при индексации содержимого страницы. Здесь обычно размещают счетчики посетителей, всякие другие коды, рекламу, и другую информацию, например об авторе сайта, правах, и дате создания.

    Так же в этом контейнере , как и в других контейнерах можно создавать и свои контейнеры, которым в таблице стилей можно задать размер и положение, атрибуты и цвет текста. Можно например сделать 3-4 колонки для группировки информации в подвале, тут уже как вам удобно.

    Теперь я думаю понятно зачем эти основные теги и какая информация размещается между ними. Подробнее о основных тегах html5 можно почитать в разделе «html теги» . Эти теги это контейнеры для содержимого, каждому из контейнеров можно задавать размеры фон, атрибуты текста и прочее. Например если контейнеру задать стили в файле ctile.css footer {width:890px; color: #fff; background-color: #0000FF;}

    то он будет шириной width:890px; то есть 890 точек, цвет текста color: #fff; белый, а фон контейнера background-color: #0000FF; синий. Так же можно написать так, , тогда к footer применится класс подвал в таблице стилей, и начинается класс с точки .podval { в скобках стили, фон, ступы и прочее }.

    Когда шаблон страницы готов, вы прописали все контейнеры, их содержимое, теперь можно брать, копировать страницу вставлять статьи, переименовывать и размножать страницы сайта. Но что делать если вы хотите изменить например пункт в меню, или написать новый раздел, изменить заголовок шапки сайта, вставить счетчик или рекламу. Неужели придется эти изменения делать во всех страницах, а если их станет 100-200 штук, то что, весь день сидеть и записывать новую информацию в каждую страницу и снова загружать на сервер. Нет!

    Как вы заметили на страницах совершенно одинаковой будет шапка сайта, подвал, и боковая колонка. Именно в этих контейнерах информация часто изменяется и они одинаковые на всех страницах. Поэтому эти части кода можно вырезать и разместить в отдельных текстовых файлах, которые можно назвать header.txt, saitbar.txt, footer.txt. Вместо них нужно поставить php код, например для вставки подвала , для шапки . Теперь код и записи из этих файлов будут вставляться в станицы, и изменяя что-то всего в одном файле изменения произойдут на всех страницах. Например разместив код счетчика в файле footer.txt код счетчика появится на всех страницах и нет нужды его вставлять в каждую страницу, так же и с рекламой, новыми блоками и колонками.

    Получается очень удобно, на странице уникальная только статья и ключевые слова, а шапка, подвал, и боковая колонка на всех страницах одинаковые и собираются страницы по запросу в баузер пользователя, и он видит целую страницу. Этот код работает на страницах с расширением php, но можно его заставить выполняться и на страницах с расширением html, для этого надо сереверу об этом указать. Запись делается в файле .htaccess, AddHandler application/x-httpd-php5 .html .htm , она сообщает серверу что нужно выполнять php скрипты на html страницах, этот фаил загружается в корневую папку сайта на сервере. Теперь после вырезания шапки, боковой колоки и подвала и замены их php кодом для вызова, страница выгладит так.

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

    заголовок

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

    Теперь в странице вместо шапки, подвала, и боковой колонки php код а сам код шапки, подвала, и боковой колонки теперь в отдельных файлах. Так же если вы заметили в самом верху страницы сразу после тега расположена четвертая вставка, или первая, если считать с верха . Часто между тегом ….. нужно вставлять метатеги и скрипты для сайта, например метатег для подтверждения владения сайтом для яндекса и гугла. Вот чтобы не прописывать это на каждой странице это можно вставить просто поместив в фаил header_cod.txt, и код вставится во все страницы.

    Получается так, создаете шаблонную страницу, в файле stile.css задаете стили отображпния контейнеров и текста. Потом все одинаковые части, которые будут часто изменяться, вырезаете в отдельные файлы. Далее создаете первые разделы, где будут ссылки на статьи, а на сами разделы делаете ссылки с шапки сайта и впринцепе все. Берете шаблон, переименовыааете, наппример novaya_straniza.php пишите статью в ней или вставляете уже написанную. Потом делаете в разделе ссылку на нее и краткое описание, примерно как у меня в разделах и процесс пошел. При небольшом знании «нарисовать» сайт можно за пару часов и далее уже писать статьи и публиковать на сервере. В следующей статье подробнее о структуре сайта, если планируется большой сайт из нескольких сотен страниц.

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

    В Google Play Market есть множество подобных программ и можно выбрать то, что подойдет именно вам. Ниже скрин самого верха с плай маркета по запросу «Web serwer».

    Часть из приложений платная, или триал на некоторое время — а потом покупать, есть и абсолютно бесплатные локальные веб сервера. Так-же и функционал у них разный, от простого html+php, до поддержки практически всего набора модулей и последних версий PHP+MySQL+phpmyadmin и прочих модулей.

    KSWEB сервер PHP+MySQL

    Этот веб сервер содержит PHP, СУБД MySQL и msmtp для поддержки функции mail в PHP. KSWEB это инструмент для веб-программирования на платформе андроид. Он позволяет вам организовать платформу для запуска и отладки сайтов на различных CMS и скриптов. Для использования приложения не нужен ROOT, но если он есть, то можно запустить сервер на стандартном порту 80.

    У приложения достаточно просто и интуитивно понятный интерфейс. Приложение правда платное, после установки вам дается 5дней на использование, после чего программа потребует ввести ключ, в общем ее надо будет купить. Стоимость KSWEB PRO — $3.99. Стоимость KSWEB Standard — $2.99.

    Некоторые возможности KSWEB: nginx v1.7.3 (SSL) / lighttpd server v1.4.35 (SSL) / PHP v5.5.14 (SSL) / MySQL v5.6.19 / msmtp v1.4.32 / Web Interface v1.1 / KSWEBFTP v1.0 MySQL хост: localhost (or 127.0.0.1) / MySQL порт: 3306 / MySQL логин «root» с пустым паролем

    Данный сервер содержит полностью готовые к работе конфигурационные файлы всех компонентов. Однако, если Вы хотите их изменить, то зайдя в настройки программы и кликнув «Внешние INI», все файлы настроек будут размещены на sdcard по адресу /mnt/sdcard/ksweb/conf/

    Весит данное приложение не так много, 15,55 Мб, но после установки занимает 73,9 Мб.

    В пробной версии некоторые функции недоступны, и сразу скажу что этот сервер не поддерживает модуль mod_rewrite, и .htaccess, по этому движки (CMS) требующие наличие модуля mod_rewrite полноценно запустить не получится. Хотя думаю что в платной версии можно включить сервер ingix и на нем все заработает. А так все отлично работает, БД создаются и движки корректно встают. Ниже скрин приложения.

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

    NAMP nginx android web server

    NAMP это nginx — веб-сервер, в отличие от большинства подобных приложений основанных на lighttpd. NAMP на платформе Android (с поддержкой виртуальных хостов) включает в себя: Nginx v1.5.0 / PHP v5.4.13 / MySQL v5.1.62 / Msmtp 1.4.30 / NAMPFTP v1.0

    Приложение тоже платное и имеет испытательный срок 10 дней, после чего NAMP предложит вам купить его. Весит приложение после установки 47,45 Мб. Цена приложения $ 1,99. Но во время испытательного срока приложение без ограничений, и самое главное есть поддержка mo_rewrite по умолчанию. У меня получилось без проблем запустить (WordPress, Livestreet) на этом сервере и все работало. Ниже скриншот приложения.

    Приложение также включает PhpMyAdmin, phpFileManager, adminer. А так-же экспорт MySQL резервное копирование на Dropbox / экспортные резервные копии сайтов на Dropbox / Резервное копирование баз данных MySQL.

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

    Так-же я опробовал и это маленькое приложение. На самом деле я пробовал гораздо больше, просто много удалял сразу из-за рекламы или триальных периодов. Некоторые приложения были трудны в освоении или не нравились интерфейсом. Но этот маленький ServDroid.web мне понравился своей простотой. Приложение весит всего 0,96 Мб, а после установки 3,49 Мб.

    По сути я так понимаю это не совсем сервер, но он локально вполне корректно отображает html страницы и переходит по ссылкам на другие страницы локального сайта. Показывает он страницы в своем окне, но так-же можно при запущенном приложении открыть свой браузер и сайты откроются в нем, нужно только адресную строку ввсети «http://localhost:8080». Ниже скриншот приложения с открытой страницей тестового сайта для примера.

    Сразу скажу что кроме просмотра html страниц это приложение ничего не может. У меня не заработали даже страницы с расширением (.php). Так-же не выполняется php на html страницах ни в самом приложении, ни в браузере. В общем эта программка подойдет тем, кто например занимется только html+css, или у кого сайт на чистом html.

    Вот еще який представитель подоного рода приложений для платформы андроид. Весит приложение 19.96 Мб, а после установки 69.57 Мб.

    Palapa Web serwer — это полноценный lighttpd сервер с PHP и MySQL, так-же в комплекте идет phpmyadmin, который корректно работает и БД создаются без проблем. Приложение в использовании достаточно простое, но в тоже время имеет множество настроек, а так-же можно править конфигурационные файлы сервера, что мне пригодилось.

    По умолчанию php не выполняется на страницах с расширением .html, но в конфиге можно добавить это выполнение прописав в конфиге lighttpd.conf в строчке
    fastcgi.map-extensions = ( «.php3» => «.php», «.php4» => «.php», «.php5» => «.php» ) запись «.html» => «.php» и станет в строчке

    fastcgi.map-extensions = ( «.php3» => «.php», «.php4» => «.php», «.php5» => «.php», «.html» => «.php» ). Скриншот правки конфига lighttpd.conf

    Этот локальный сервер мне понравился больше всего из опробованых, и я им пользуюсь и сейчас. Но он как и множество подобных не понимает .htaccess и почему-то тоже не работает mod_rewrite, хотя он вроде присутствует. Но мне это не мешает так-как я не использую mod_rewrite в своих сайтах, да и БД (MySQL)не использую, и движки (CMS). У меня простенькие сайты на html+php и этот сервер отлично справляется с этим, так-же прекрасно через phpmyadmin создаются MySQL если нужно.

    Немного технических характеристик «Палапа веб сервер»

    Поддержка устройств, использующих ARM и Intel (x86) процессоры. В составе приложения : Lighttpd 1.4.35 / PHP 5.5.1 / MySQL 5.1.69 / MSMTP 1.4.32 / Web Admin 2.1.0

    Путь до папки www куда нужно положить файлы своего сайтов: sdcard/pws/www. По умолчанию URL Адрес: http://127.0.0.1:8080. Чтобы зайти в Web Admin — http://127.0.0.1:9999 ( Имя/пароль: admin/admin ). MySQL Информация: локальный (127.0.0.1), порт: 3306 , имя пользователя: root, пароль: adminadmin.

    На этом я заканчиваю этот небольшой обзор, надеюсь информация для вас была полезна.