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

Архив Январь, 2018

Делаем сайт

В этом разделе размещена информация о принципах работы и устройстве интернет сайтов. Здесь можно узнать что такое домен, хостинг для сайта, и зачем они нужны. По какому принципу строятся простые и сложные сайты, движки сайтов и структура. Так же поэтапный разбор самостоятельного написания сайта, начиная с первых HTML тегов разметки текста и заканчивая разработкой шаблона и каркаса для будущего сайта. Сколько я зарабатываю на своих сайтах
Сколько можно заработать на сайтах, и сколько зарабатываю я. Скриншоты доходов, и рекомендации для тех кто тоже хочет зарабатывать на сайтах Как писать статьи CEO
В интернете сейчас «тонны сайтов» по SEO, продвижению и оптимизации сайтов. И почти все пишут что нужно составлять семантическое едро сайта, подбирать заголовки, title и description Оптимизация сайта для мобильных устройств
Добавление мета тегов, а так-же указание css для различных разрешений дисплеев, пример кода и описание Сравнение ведения html сайта и сайта на CMS
Основные плюсы и минусы создания, ведения, и администрирования простого html самописного сайта, и сайта на движке CMS Дизайн, основы CSS и основные стили оформления сайта
Принципы создания стилей и основные стили CSS для отображения содержимого страниц. статье я составил список основных css стилей Основные html теги для создания и ведения сайта
Основные html теги для создания и ведения сайта. Кажется что самому создать и написать сайт сложно, так как нужно знать html и CSS Создание шаблона, каркас и структура папок и файлов
Создаем шаблон готового сайта, строим каркас, делаем папки с разделами, создаем папки для картинок, статье описано как можно и как… Дизайн сайта, работа с таблицей стилей stile.css
Рисуем дизайн сайта в таблице стилей stile.css. Внешний вид, позиционирование, ширина, размер текста, его цвет и прочее, все это CSS стили Первая страница и шаблон, верстка и смысл тегов
В статье я описал из чего состоит html страница, разобрал основные теги, в которые заключается для отображения в браузере текст, и другие элементы Какие инструменты понадобятся для создания сайта
Что нужно чтобы начать самостоятельно писать сайт, какие инструменты-программы для этого необходимы Вводная информация для тех кто хочет создать свой сайт
В общих словах о том с чего начинать делать сайт и что понадобится для этого. Как писать статьи, где нужно регистрироваться, и как привлечь посетителей на свои страницы Домен и хостинг, зачем они нужны
Для работы сайта в интернете требуется место на хостинг-сервере, который круглосуточно соединен с интернетом

Основные css стили для создания сайта Как правило стили отображения контейнеров, и их содержимого прописываются в таблице стилей, которая обычно называется stile.css, хотя можно назвать как угодно. Главное чтобы на странице в теге был правильный путь до таблицы стилей

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

.chapka_saita { в фигурных скобках указываем стили }

Так же стиль для контейнера можно указать напрямую если ему не присвоен класс. Например стиль для контейнера содержимое начинается с названия контейнера

header { в фигурных скобках указываем стили }

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

#blok1 { в фигурных скобках указываем стили }

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

.chapka_saita { в фигурных скобках основной стиль контейнера }
.chapka_saita h1, h2 { стиль для заголовков в тегах

и

для этого контейнера } .chapka_saita a { стиль для ссылок в этого в этом контейнере } .chapka_saita a:hover { стили для ссылок при наведении курсора мыши } .chapka_saita img { стили для изображений в этом контейнере } Сами стили прописываются в этих фигурных скобках и разделяются точкой с запятой ;

font-family: Arial; задает шрифт контейнера, обычно его применяют в теге , в котором все содержимое страницы

line-height: 1.2; задает высоту строк для шрифта

Отступы

padding: 10px; задает внутренний отступ содержимого от границы контейнера, в данном случае отступ 10 пикселей, можно указывать значение в процентах, или в em
margin: 5px; задает внешние отступы контейнера,
margin: 10px 5px 0px 15px; отступы можно указывать и по отдельности для каждой стороны
margin-bottom: 10px; можно указывать отступ только с одной стороны, в данном случае отступ от низа 10пикселей. Тоже самое можно применять и внутренним отступам padding.

Ниже пример стилей для тега

body { margin-left: auto; margin-right: auto; width: 930px; font-size: 12px; font-family: Arial; line-height: 1.2; background-image: url(images/fon.jpg); }

font-size: 12px; указывает размер шрифта, можно указывать в пикселях, процентах, или em
color: #0000ff; указывает цвет шрифта, в даном случае #0000ff синий , можно указать словом, например color: green; тоесть цвет зеленый.
text-decoration: none; убирает подчеркивание, применяется для ссылок чтобы убрать нижнее подчеркивание
text-transform:uppercase; делает все буквы текста заглавными, вместо uppercase можно писать другие значения и наоборот сделать верхнее или нижнее подчеркивание, зачеркивание.
font-weight:bold; выделает шрифт полужирным, вместо bold можно применять и другие значения
text-align:left; задает выравнивание текста, в данном случае left, к левой части контейнера, можно задавать значение conter, hight.
text-shadow: 1px 2px 1px 0px #000000; color: #f9f5ed;тень для текста
background-color: #DCDCDC; назначает цвет фона контейнера, в данном случае #DCDCDC серый
background-image: url(images/fon.jpg); задает фоновое изображение

border: 1px solid #E8E8E8; назначет бордюр, фраза solid означает сплошной бордюр, #E8E8E8 цвет бордюра. Можно указывать отдельно бордюр для каждой стороны, например border-top: 2px solid #E8E8E8;

border-radius: 10px; скругление углов контейнера, можно задавать разное скругление на каждом угле border-radius: 2px 6px 10px 0px;
box-shadow: #2C2C29 10px 10px 10px; тень для контейнеров

width:926px; указывает ширину контейнера

height: 240px; высота контейнера

float:left; прижимает контейнер к левой части, по умолчанию контейнеры идут по порялку, а если хочется выстроить несколько блоков в линию, то им нужно задать свойство float:left; и ширину height: px; чтобы они поместились по ширине в родительском контейнере.

float:right; тоже самое, но контейнеры прижимаются к правой части.
Если хотите сделать контейнер посередине, то указывайте ширину, а отступы avto , пример: margin-left: auto; margin-right: auto; width: 150px;

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

Если указать одно значение например: border-radius: 10px; то уголки округлятся со всех четырех углов

Если два значения, например: border-radius: 6 px 10px; то первое значение задает радиус верхнего левого и нижнего правого уголка, второе значение для верхнего правого и нижнего левого уголка.

Если три значения например: border-radius: 10px; 20px 4px; то первое значение задает радиус для верхнего левого уголка, второе  одновременно для верхнего правого и нижнего левого, а третье  для нижнего правого уголка

Если четыре например: border-radius: 10px; 20px 4px 8px; то радиус задается поочередно для всех четырех уголков

В случае указания двух значений через слэш (/) border-radius: 80px/50px;, то первое значение задает радиус по горизонтали, а второе по вертикали (эллиптические уголки)

В предыдущих статьях я описал что такое сайт, домен и хостинг, показал примеры html страницы. Разобрал html код на странице, те есть вы узнали что содержимое страницы заключается в теги, которым в таблице стилей stile.css задаются стили для отображения. Так же в общих чертах написал о том как можно создать шаблон. Теперь опуская теги и прочее хочу подробнее показать как можно создавать удобный каркас сайта, чтобы потом быстро и удобно наполнять сайт статьями, или другой информацией. Так же о том как правильно писать пути до файлов, когда они лежат в разных папках и разных уровней вложенности от корневой папки. Собственно в первом варианте нет никакой структуры и вложенности файлов. Когда планируется небольшой сайт из 10-20 страниц, например сайт визитка, или небольшой блог, то нет смысла разделять страницы на отдельные папки и разделы. В этом случае можно все html страницы расположить в корневой папке, их мало и не запутаешься. Корневая папка, это папка на сервере, в которую должны выкладываться файлы сайта, на хостинге у разных хостеров по разному, но обычно это папка www или public_html.

Когда вы создали шаблонную страницу, то у вас будет собственно два файла, это сама страница index.php или index.html и файл стилей stile.css. После того как вы разделите страницу на части и вынесете в отдельные файлы шапку, боковой блок, подвал, и вставку в тег , то у вас получится 6 файлов. Седьмой будет папка для картинок images, в которую для удобства нужно скопировать главную страницу index.php, и переименовать ее в chablon.php. Теперь когда нужна новая страница, то идем в папку images, копирум файл chablon.php, возвращаемся в корень сайта и вставляем его. Далее переименовываем chablon.php например в novaia_stranica_saita.php, в ней заполняем ключевые слова и описание, заголовок, и вставляем статью, все новая страница готова, осталось сделать на нее ссылку с главной страницы или из радела. Структура файлов будет примерно такой.

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

Пути до файлов в ссылка и вставках

Все пути, например для вызова шапки сайта на страницах или вставки картинки в статью ... будут простые. Фаил hider.txt лежит в той же папке что и страницы, поэтому в пути пишем просто его название. Картинка с названием izobrazhenie.jpg лежит в папке images, поэтому путь начинается с этой папки, а разделение идет с помощью символа / , это слеш для разделения путей до файлов. Путь можен быть бесконечно длинным, тогда указываем все папки разделяя символом / , например content/razdel/foto/images/izobrazhenie.jpg. Понятно что картинка izobrazhenie.jpg лежит в папке images, которая в папке foto, а папка foto лежит в папке под названием razdel, а папка razdel вложена в папку content, а папка content лежит там же где и страница в которую нужно вставить эту картинку.

Если например страница у вас лежит не в корне сайта, а в отдельной папке. К примеру вы создали на сайте папки с разделами и решили все страницы распределить по разделам, а папка images у вас в корне сайта. Тогда путь до картинки в этой папке будет начинаться с двух точек и слеша ../ , это сочетание указывает что путь до файла начинается с верхнего уровня, а не с того где лежит страница. Уровней вложенности может буть несколько, тогда чтобы вернуться на один уровень то пишем в начале пути ../ , если на два уровня, то ../../ , если на три уровня выше то ../../../images/izobrazhenie.jpg

Более сложная структура для большого сайта из нескольких сотен страниц

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

Подобное можно видеть на этом сайте. Если перейти в раздел «Делаем сайт» или любой другой, то вы видите список с кратким описанием и ссылками на статьи, а адрес в строке браузера http://domen.ru/delaem_sait/ говорит что вы на главной странице в разделе delaem_sait, это папка раздела, которую я назвал delaem_sait. Так как на момент написания этих статей я еще не покупал домен и хостинг, то вместо реального домена я для примера вписал в названии сайта domen.ru.

Как вы наверное догадались когда набираешь адрес сайта, то страница index.php загружается сама, если страница с таким названием в корне сайта, то это главная страница сайта. Так же если в разделах будет такая страница, то ее адрес не надо дописывать в ссылках, она сама загрузится, и является главной в разделе, а другие страницы должны быть с другими названиями и их уже надо вписывать в путь ссылки delaem_sait/page1.php, это путь до страницы page1.php в разделе delaem_sait. Со ссылками и путями я думаю понятно, просто много одних и тех же вопросов по путям, поэтому на этом делаю акцент.

Скриншот содержимого этого сайта на момент написания статей. В папке sait_sistem лежат вставки (шапка подвал и пр.) так же файл stile.css. Слелующие четыре папки содержат разделы, то есть в них с раницы и папки images с картинками к статьям. Так же index.php это главная страница сайта, а chablon.php это шаблонная страница, которую я беру чтобы написать новую статью.

Содержимое корневой папки сайта Как вы помните шапка сайта, подвал, боковой блок, и другое у нас в отдельных файлах и вставляется в страницы с помощью php кода include. Эти файлы вставки, а так же файл stile.css можно убрать из корня в отдельную папку. Далее создать папки с названием разделов сайта и в них вкладывать страницы, а так же свои папки images. Если изображений слишком много, то в папках images можно делать подпапки для каждой страницы из разделов. Если на сайте планируется выкладывать видеоролики, или архивы для скачивания, то для них тоже лучше создать свои папки.

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

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

Использование тега

для чего нужен тег

Тег

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

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

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

ставят самым последним.

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

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

Александр Пушкин — Я помню чудное мгновенье

Я помню чудное мгновенье:

Передо мной явилась ты,

Как мимолетное виденье,
Как гений чистой красоты.

В томленьях грусти безнадежной

В тревогах шумной суеты,

Звучал мне долго голос нежный,
И снились милые черты.

Шли годы. Бурь порыв мятежной

Рассеял прежние мечты,

И я забыл твой голос нежный,
Твои небесные черты.

В глуши, во мраке заточенья

Тянулись тихо дни мои

Без божества, без вдохновенья,
Без слез, без жизни, без любви.

Душе настало пробужденье:

И вот опять явилась ты,

Как мимолетное виденье,
Как гений чистой красоты.

И сердце бьется в упоенье,

И для него воскресли вновь

И божество, и вдохновенье,
И жизнь, и слезы, и любовь.

Основные CSS стили

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

Стили для текста (шрифта) CSS

font-family
С помощью этого стиля указывается шрифт и тип для всей страницы или части текста font-size
Задает размер шрифта, можно указывать в процентах-%, em, пикселях -px, и др. color
3адает цвет текста. указывается цвет текста в контейнерах font-style
По умолчанию стиль текста нормальный, но можно задать наклонный, курсивный… font-weight
Управляет жирностью шрифта (толщиной букв) text-align
Задает выравнивание текста, по левому, правому краю и др. text-decoration
Подчеркивание текста, линия снизу, сверху, или перечеркивание text-shadow
Создает тень для текста text-transform
Трансформирует текст, делает все буквы заглавными, или строчными line-height
Устанавливает расстояние между строк, меж-строчный интервал

Стили для контейнеров (блоки, body, head, footer, div и др.)

width и height
Задают размеры контейнеров (блоков и элементов) margin и padding
Определяют внешние и внутренние отступы для контейнеров float
Устанавливает выравнивание контейнеров по левому или правому краю background
Задает фон, устанавливает цвет фона или изображение border
Устанавливает бордюр, стиль границы контейнера border-radius
Устанавливает радиус скругления углов контейнеров и элементов box-shadow
Тень элементов, устанавливает тень границы контейнеров и др. display
Определяет как должны отображаться блоки на странице rgba и opacity
С помощью rgba и opacity можно устанавливать прозрачность блокам или только фонам

Здравствуйте, на страницах этого сайта я расскажу как сделать свой собственный сайт или блог, не зависимо от каких либо сервисов, конструкторов и систем управления контентом (CMS). Данный сайт написан в обычном текстовом редаккторе и не использует ни каких движков и баз данных, а обычные статистические страницы. Повторяющийся код (шапка, подвал, сайтбар) вынесен в отдельные файлы, что позволяет изменять информацию на сайте мгновенно. Так же отдельный фаил CSS при необходимости позволяет быстро менять дизайн сайта. Опубликовать статью так-же быстро, как используя движки для сайтов.

Читая эти строки для вас сразу становятся непонятными фразы, такие как движок, html, CSS, CMS, и другое, прочитайте до конца эту статью и многое прояснится, хотя появятся новые вопросы, ответы на которые вы найдете в следующих статьях в разделе «Делаем сайт«. В этом разделе я написал о создании сайта с самых основ, начиная с домена и хостинга, устройства страниц сайта и использования html и CSS. Ниже для примера я нарисовал структуру сайта, корневая папка www, в которой лежит главная страница сайта index.php, а далее в папках разделы, лежат страницы уже относящиеся к разделам.

Как самому написать, сделать свой сайт

Как вы наверное уже где то читали сайты в интернете состоят из множества страниц. На заре массовой доступности интернет сети все это дело только зарождалось. Тогда страницы сайтов писали вручную используя обычный текстовый редактор. Применяя специальные теги в станицах вебмастера указывали браузерам как показывать тот или иной элемент на странице. Без html разметки статья выглялит так же как и в редакторе, но выделив например заголовок тегом h1 затем открыв страницу в браузере мы увидим что заголовок теперь написан крупным шрифтом и выделяется. Так вот html язык верстки страниц предназначен для разметки текста и элементов на страницах, а так же для всех других элементов. CSS это тоже язык, который идет неразрывно с html, но эсли html размечает статью и весь сайт в целом, то СSS придает этим элементам внешний вид. Примерная структура сайта С развитием интернета массовую популярность приобрели системы управления контентом, или по просту CMS (движок сайта). Они упростили жизнь вебмастерам так как многие процессы стали автоматизированными. Теперь не надо писать статьи используя hfml верстку. Достаточно зайти в админку, нажать на «кнопочку» создать страницу, вам откроется редактор, заполняете заголовки и поля, пишите статью и готово. При этом движок сайта сам расставит нужный код в статье, а так же к ней применяются CSS стили, в общем он сделает очень много работы, о которой вы возможно и не догадываетесь. С развитием систем управления контентом создать свой сайт может любой человек не особо знающий о веб программировании и прочем. Сейчас можно запустить хоть целый портал, не говоря о маленьком блоге. Некоторые популярные движки для сайтов, логотипы Но здесь не все так просто, иначе зачем люди пишут свои сайты в блокнотах когда есть просто море различных движков для сайтов. Во первых простота работы с движком сайта это только на первый взгляд, а когда начинаешь вести свой блог, то там под капотом оказывается куча служебных файлов движка, и чтобы что-то изменить на сайте (сделать под себя) придется лезть в этот код и разбираться в нем, а это как многие проходили, куча нервов, времени, сил, и не редко потеря всего материала, который вы написали.

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

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

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

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

новый сайт

Блог почтальона Печкина

Всегда свежие газеты на завтрак

Первая статья о новой газете

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

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

Надежность и сохранность сайта и всех статей (контента). Так как сайту не нужна админка и регистрация пользователей, то такой сайт практически невозможно взломать. Плюс к тому также что страницы статистические, и статьи (текст) хранятся на хостинге, а не на отдельном СУБД MySQL сервере. А так же локальная версия сайта всегда на вашем компьютере или планшете.

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

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

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

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