|
|
|
Сайт в блокноте — сайтостроение для начинающих
Сайт в блокноте — сайтостроение для начинающих Здравствуйте, на страницах этого сайта я расскажу как сделать свой собственный сайт или блог, не зависимо от каких либо сервисов, конструкторов и систем управления контентом (CMS). Данный сайт написан в обычном текстовом редаккторе и не использует ни каких движков и баз данных, а обычные статистические страницы. Повторяющийся код (шапка, подвал, сайтбар) вынесен в отдельные файлы, что позволяет изменять информацию на сайте мгновенно. Так же отдельный фаил CSS при необходимости позволяет быстро менять дизайн сайта. Опубликовать статью так-же быстро, как используя движки для сайтов. Читая эти строки для вас сразу становятся непонятными фразы, такие как движок, html, CSS, CMS, и другое, прочитайте до конца эту статью и многое прояснится, хотя появятся новые вопросы, ответы на которые вы найдете в следующих статьях в разделе «Делаем сайт«. В этом разделе я написал о создании сайта с самых основ, начиная с домена и хостинга, устройства страниц сайта и использования html и CSS. Ниже для примера я нарисовал структуру сайта, корневая папка www, в которой лежит главная страница сайта index.php, а далее в папках разделы, лежат страницы уже относящиеся к разделам.Как самому написать, сделать свой сайт
Как вы наверное уже где то читали сайты в интернете состоят из множества страниц. На заре массовой доступности интернет сети все это дело только зарождалось. Тогда страницы сайтов писали вручную используя обычный текстовый редактор. Применяя специальные теги в станицах вебмастера указывали браузерам как показывать тот или иной элемент на странице. Без html разметки статья выглялит так же как и в редакторе, но выделив например заголовок тегом h2 затем открыв страницу в браузере мы увидим что заголовок теперь написан крупным шрифтом и выделяется. Так вот html язык верстки страниц предназначен для разметки текста и элементов на страницах, а так же для всех других элементов. CSS это тоже язык, который идет неразрывно с html, но эсли html размечает статью и весь сайт в целом, то СSS придает этим элементам внешний вид. > Примерная структура сайта С развитием интернета массовую популярность приобрели системы управления контентом, или по просту CMS (движок сайта). Они упростили жизнь вебмастерам так как многие процессы стали автоматизированными. Теперь не надо писать статьи используя hfml верстку. Достаточно зайти в админку, нажать на «кнопочку» создать страницу, вам откроется редактор, заполняете заголовки и поля, пишите статью и готово. При этом движок сайта сам расставит нужный код в статье, а так же к ней применяются CSS стили, в общем он сделает очень много работы, о которой вы возможно и не догадываетесь. С развитием систем управления контентом создать свой сайт может любой человек не особо знающий о веб программировании и прочем. Сейчас можно запустить хоть целый портал, не говоря о маленьком блоге. > Некоторые популярные движки для сайтов, логотипы Но здесь не все так просто, иначе зачем люди пишут свои сайты в блокнотах когда есть просто море различных движков для сайтов. Во первых простота работы с движком сайта это только на первый взгляд, а когда начинаешь вести свой блог, то там под капотом оказывается куча служебных файлов движка, и чтобы что-то изменить на сайте (сделать под себя) придется лезть в этот код и разбираться в нем, а это как многие проходили, куча нервов, времени, сил, и не редко потеря всего материала, который вы написали.Все это конечно сложно, за один день не освоишь, но если есть терпение и огромное желание, то вы всему что вам необходимо научитесь. Помните что по статистике из 100 человек, которые начали вести свои сайты, только 2-3 человека не бросают это из-за трудностей и ошибок и добиваются каких то успехов в этом деле.
Если же не проходить долгий путь от «бесплатных» сервисов для создания сайтов, а потом опробования кучи движков. То лучше потратить месяц на изучение принципов и основ строения и работы интернет сайтов, чтобы точно понимать за что браться и с чем работать. И для начала нужно самому написать свой первый сайт, посмотреть как это работает, написать несколько статей и оформить, и даже выгрузить на хостинг чтобы сайт стал доступен для всех пользователей интернета.
Так выглядит страница в текстовом редакторе, а ниже на скриншоте уже в браузере
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>новый сайт</title>
</head>
<header>
<h2>Блог почтальона Печкина</h2>
<h3>Всегда свежие газеты на завтрак</h3>
<HR NOSHADE COLOR="green" SIZE="5">
</header>
<body>
<h2>Первая статья о новой газете</h2>
Всем привет, я почтальон Печкин, я теперь добрый - у меня есть велосипед. Спешу вас обрадовать, скоро выйдет новый выпуск газеты "Деревенские страсти". Там будет специальный выпуск о нашей деревне, о наших жителях и о том как мы готовимся к Новому году!
</body>
<footer>
<HR NOSHADE COLOR="green" SIZE="5">
®все права защищены Печкин 2000ххх год.
</html>
>
А так эта же страница выглядит в браузере
На сегодняшний день интернет стал очень интераективен, сайты теперь могут почти все, социальные сети захватили весь мир. Огромные интернет магазины ворочают тоннами товаров и обслуживают тысячи посетителей. Тематические форумы и соцсети теперь держат пользователя всегда в курсе происходящего. С такой задачей, если вам нужен портал или форум, конечно минимальными навыками не справится, и уж тем более не написать движок в блокноте. Но если вам нужен свой блог, или тематический небольшой сайт, то это вполне реализуемо без применения движков и программирования.Опишу преимущества создания сайта с блокноте. Во первых простота и легкое расширение сайта в последующем, если конечно такое сразу закладывается на стадии построения каркаса. Минимальная нагрузка на хостинг, так как все страницы статистические, то есть реальные, а не генерируемые движком для пользователей во время запроса браузером. Минимальная нагрузка на сервер, значит дешевый хостинг и любой, без проблем, даже если на сайте будет несколько тысяч посетителей в сутки.
Надежность и сохранность сайта и всех статей (контента). Так как сайту не нужна админка и регистрация пользователей, то такой сайт практически невозможно взломать. Плюс к тому также что страницы статистические, и статьи (текст) хранятся на хостинге, а не на отдельном СУБД MySQL сервере. А так же локальная версия сайта всегда на вашем компьютере или планшете.
Принцип постройки такого сайта довольно прост. Установив программу — локальный веб сервер, чтобы можно было видеть через свой браузер сайт так, как его увидят после выгрузи на хостинг уже все пользователи интернета. В блокноте создаете шаблон страницы, шапка сайта, навигация, боковое миню, подвал и прочее. В файле стилей CSS придаете красивый дизайн всем элементам сайта и шаблон готов. Копируй страницу, пиши в нее статью и готово. Но сразу вопрос, а если я напишу 100 страниц и захочу потом что нибудь сменить или добавить, например новый пункт в меню, что для этого придется изменения делать во всех 100 страницах. > Вставка элементов страницы, сайт на инклудах Нет, когда вы создали шаблон, то разделяете страницу на части. На страницах кроме статей все элементы одинаковые и нет нужды их повторять на каждой странице. Такие элементы как шапка сайта, подвал, боковое меню, сайт бар, повторяются на каждой странице. Уникален только контент — статья, поэтому страницу можно собирать как кирпичики перед подачей пользователю. Те части, которые будут одинаковые на всех страницах мы просто выносим в отдельные файлы, а вместо них ставим специальный код, и во время загрузки страницы все элементы вынесенные в отдельные файлы будут сами туда вставляться и пользователю будет показываться целая страница.
Получается очень просто, чтобы написать новую страницу на сайт просто берете шаблонную страницу, переименовываете ее, вставляете или пишете прямо в ней статью. Далее приписываете для поисковиков теги, в статье заголовки выделяете тегами, размечаете параграфы, вставляете фото или видео и готово. Странице через FTP клиент загружаете на сервер и она у вас на сайте и всем доступна. При этом если вы хотите сменить дизайн, то правку надо делать всего в одном файле style.css. Если хотите добавить новые пункт в меню или изменить ссылки, то тоже правка всего в одном файле, а так как он вставляется во все страницы во время выдачи в браузеры пользователей, то изменения произойдут на всех страницах сайта.
Конечно много из мной написанного возможно людям совсем без опыта не понятно. Но чтобы войти в курс дела надо начать по порядку. Сначала нужно узнать что такое домен и хостинг, потом дальше разобраться с принципом устройства сайтов. А далее дело пойдёт, подробнее и более развернуто читайте в разделе «Делаем сайт».
HTML шаблоны на русском
20 Лучших HTML шаблонов на русском. Разработка под SEO и чистый, лёгкий код.
Компания TemplateMonster представляет подборку лучших HTML шаблонов на русском.
ФинПРО — Финансовый HTML шаблон
Детали | Демо
Диагональ — Многостраничный HTML шаблон для рекламного агентства
Детали | Демо
Mongo – Многоцелевой готовый шаблон бизнес-вебсайта
Детали | Демо
Ru Website Template MetaSoft — готовый HTML шаблон для компании по разработке ПО
Детали | Демо
PROTaxing – Многостраничный HTML шаблон аудиторской компании
Детали | Демо
Мануал-люкс — Готовый Класcический Novi Шаблон Медицинского Вебсайта
Детали | Демо
ПРОБизнес – Корпоративный Многостраничный HTML Шаблон
Детали | Демо
Ru Website Template Интеллект — креативный HTML шаблон детского центра развития
Детали | Демо
Declar – Правовой Многостраничный HTML Шаблон
Детали | Демо
Новое Поколение – Церковный Многостраничный Готовый HTML Шаблон
Детали | Демо
Развитие – Готовый Инвестиционный HTML Шаблон
Детали | Демо
Ru Website Template Jacqueline — Real Estate Multipage
Детали | Демо
Инпром – Промышленный Многостраничный HTML Шаблон
Детали | Демо
Foodure – Готовый Шаблон Веб-Сайта Ресторана
Детали | Демо
Infant – Готовый Шаблон для Веб-сайта Детского Сада
Детали | Демо
Concraft – Строительный HTML Шаблон
Детали | Демо
Техностандарт — готовая русифицированная тема сайта промышленной компании
Детали | Демо
Готовая многостраничная HTML Ru тема сайта университета
Детали | Демо
Агросервис — готовий многостраничный HTML Ru шаблон сайта органической еды
Детали | Демо
Дентис — готовый многостраничный HTML Ru шаблон стоматологического сайта
Детали | Демо
После того как вы ознакомились с созданием простейшего одностраничного сайта перейдем к сайту посложнее , из пяти страниц.
Ввиду того,что мы будем создавать простой пятистраничный сайт мы рассмотрим создание сайта без CMS (без движка).Стоит заметить что для создания сайта применяются табличная или блочная верстка.В большинстве случаев для создания применяется и табличная и блочная верстка.Здесь мы будем рассматривать табличную верстку.
Во первых необходимо создать папку к примеру в «Мои документы» и назвать «htdocs».В эту папку вы должны помещать все документы связанные с созданием сайта.
| <html> <head> <title> </title> </head> <body> </body> </html> |
|
Пишем код таблицы между тегами <body> и </body>.
| <html> <head> <title> </title> </head> <body> <table Border=0> <tr> <td></td> <td></td> <td></td> <tr> <td></td> <td></td> <td></td> <tr> <td></td> <td></td> <td></td> </tr> </table> </body> </html> | Далее приступим к созданию таблицы.Составим таблицу, что бы разместить наши данные в тех частях страницы в которых мы хотим их видеть.Таблицы для того и служат чтобы представлять данные по всей странице.Сделаем таблицу из 3 строк <tr> и 3 столбцов <td> всего 9 ячеек. Пишем код таблицы(здесь и далее вставляемые элементы будут выделены красным цветом.) Контент сайта пишется в ячейке между тегами <td> и </td> |
Так таблица будет выглядеть :
 | <html> <head> <title> </title> </head> <body> <table Border=0> <tr> <td>1 ячейка</td> <td>2 ячейка</td> <td>3 ячейка</td> <tr> <td>4 ячейка</td> <td>5 ячейка</td> <td>6 ячейка</td> <tr> <td>7 ячейка</td> <td>8 ячейка</td> <td>9 ячейка</td> </tr> </table> </body> </html> |
| <html> <head> <title> </title> </head> <body> <table Border=0> <tr bgcolor=»#B3FDB2″> <tr bgcolor=»#D0D2FF»> <tr bgcolor=»#FFF0F0″> | Теперь приступим к точной разметке таблицы введя теги width и height в тег <table> и <td> таблицы. В пикселях можно более точно установить размеры таблицы,но сейчас мы будем указывать в процентах,так как в дальнейшем не придется дополнительно описывать процедуру адаптации сайта под различное разрешение экрана у посещающих ваш сайт пользователей. В теге <table> установим высоту и ширину=100%. В теге <td> указываем проценты от размера таблицы а также желательно сразу указать цвет строк bgcolor,чтобы таблица была видна. |
Посмотрите страницу с таблицей в малом окне.Щелкните по фото ниже. 
| <html> <head> <title> </title> </head> <body> <table Border=0> <tr bgcolor=»#B3FDB2″> <td></td> <td> <h3>Мой сайт о дизайне</h3></td> <td ></td> </tr> <tr bgcolor=»#D0D2FF»> <tdheight=»8%»></td> <td></td> <td height=»8%»></td> </tr> <tr bgcolor=»#FFF0F0″><td></td> <td> <h4>Мы занимаемся дизайном дома и приусадебного участка. Мы можем спроектировать ландшафты загородного дома.</h4> <</td> <td></td> </tr> </table> </body> </html> | Далее будем наполнять содержимым наш сайт Напишем во 2 ячейке название
страницы,сразу задайте размер шрифта <h3>Мой сайт о дизайне </h3>, |
А теперь добавим в наш сайт картинки дизайна.Чтобы вставить картинку или фото на сайт применяется тег <img src=»имя.jpg»>.Когда будете добавлять свои картинки на сайт,замените имя картинки на своё и поместите их в папку сайта.
| <html> <head> <title> </title> </head> <body> <table> <tr bgcolor=»#B3FDB2″> <td><img src=»landshaft1.jpg»></td> <td> Мой сайт о дизайне</td> <td ><img src=»landshaft2.jpg»></td> </tr> <tr bgcolor=»#D0D2FF»> <tdheight=»8%»></td> <td></td> <td height=»8%»></td> </tr> <tr bgcolor=»#FFF0F0″><td>></td> <td>Мы занимаемся дизайном дома и приусадебного участка. Мы можем спроектировать ландшафты загородного дома.</td> <td ></td> </tr> </table> </body> </html> |
Посмотрите страницу в малом окне.Щелкните по фото ниже. 
| <html> <head> <title>Создание сайта самостоятельно </title> </head> <body> <table> <tr bgcolor=»#B3FDB2″> <td><img src=»landshaft1.jpg»></td> <td> Мой сайт о дизайне</td> <td ><img src=»landshaft2.jpg»></td></tr> <tr bgcolor=»#D0D2FF»> <tr bgcolor=»#FFF0F0″> | Приступим к дальнейшей вставке содержимого в сайт.Придумайте название сайта и впишите его в заголовок между тегами <title> и </title> Заголовок сайта будет невидим в рабочей области и нужен для поисковых систем Интернета. Седьмую ячейку отдадим под меню. Заполните ячейки содержимым сайта к примеру ,в 4 ячейке- Главная, в 5 ячейке-Садовый дизайн, в 6 ячейке-Внутренний дизайн, в 9 ячейке-Кухонный дизайн. На 4,5,6,9 ячейку тоже создаются вторые страницы со ссылками на них |
Посмотрите первую страницу в малом окне.Щелкните по фото ниже.
Смотрим первую страницу сайта на полном экране.
Осталось немного,увеличить шрифт и расположить его в середине.
В Мой сайт о дизайне добавьте размер шрифта <h4> и измените шрифт основного текста значением <h3></h3>
а также разместите эти надписи по центру <center></center>
| <html> <head> <title>Создание сайта самостоятельно </title> </head> < body> <table> <tr bgcolor=»#B3FDB2″> <tr bgcolor=»#D0D2FF»> <tdheight=»8%»><center><a href=»site1-2.html»>
Главная</a></center></td> <tr bgcolor=»#FFF0F0″><td>
</td><td><center><h3>Мы занимаемся дизайном дома и приусадебного участка. <td>
<center><a href=»site5.html»>Дизайн для кухни</center></a></center></td> |
Посмотрите первую(главную) страницу 
Вот теперь вы можете посмотреть первую(главную) страницу
Создайте вторую страницу сайта.Скопируйте минимальный набор тегов которые мы писали в самом начале создания сайта и вставьте в текстовый редактор. Сохраните его под именем site2.html в папке для файлов сайта,которую вы создали в самом начале урока.Это и будет вторая страница сайта на которую мы будем делать ссылку из первой(главной) страницы.Откройте site2.html в текстовом редакторе и напишите <h4> Я покажу вам свои фотографии </h4> а также задайте цвет <font color=»#FF0000″> </font> и размер <h3></h3>
| <html> <head> <title> </title> </head> <body font color=»#FF0000″><h3>Я покажу вам свои фотографии</h3></font> </body> </html> |
Вставьте на страницу фотографии
<img src=»land1.jpg»>
<img src=»land2.jpg»>
Вы можете вставить свои фото,только укажите их размер в пикселях: <img src=»имя.jpg»>,
а также поместите эти фото в папку с сайтом.
Это полный код вашей второй страницы
| <html> <head> <title> </title> </head> <body><h3>Я покажу вам свои фотографии</h3> <img src=»land1.jpg»> <img src=»land2.jpg»> </body> </html> |
Посмотрите вторую страницу 
Сделаем ссылку на эту страницу в первой(главной) странице.
Ссылки создаются тегом <a href=»имя страницы.html»>Ссылка</a>
Откройте первую страницу в текстовом редакторе и напишите в 7 ячейке таблицы ссылку <a href=»site2.html»>Мои фото</a>
Посмотрите полный код вашей главной страницы
| <html> <head> <title> </title> </head> <body> <table> <tr bgcolor=»#B3FDB2″> <td ><img src=»landshaft1.jpg»></td> <td><center><h4>Мой сайт о дизайне</h4></center></td> <td><img src=»landshaft2.jpg»></td> </tr> <tr bgcolor=»#D0D2FF»> <tr bgcolor=»#FFF0F0″> <td><a href=»site5.html»>Дизайн для кухни</a></center> |
Для страниц со ссылок:
Садовый дизайн (site5.html)
Дизайн интерьера (site7.html)
Дизайн для кухни (site8.html)
создаются отдельные страницы.
Вот мы и сделали сайт и вы его можете посмотреть здесь
В папке htdocs которую вы создали в начале урока должны быть файлы
tab1.html
tab3.html
landshaft1.jpg
landshaft2.jpg
site1-1.html
site1-2.html
site1-3.html
site2.html
site5.html
site7.html
site8.html
land1.jpg
land2.jpg
Важные советы
Когда будете делать свой сайт, главную или первую страницу сайта (у нас она называется site1-3.html) всегда сохраняйте под именем index.html При загрузке с сервера она будет загружаться первой, и возьмите себе за правило сразу ее так и называть, в дальнейшем вы не будете путаться при создании ссылок.
Папка, в которой будете хранить файлы для сайта должна называться htdocs. Имена папок и файлов сохраняйте с английскими буквами. Создавая сайт в одном браузере обязательно просмотрите его в других,потому что сайт созданный к примеру в OPERA может совсем по другому выглядеть к примеру в INTERNET EXPLORER
Мы рассмотрели создание самого простого сайта.Я надеюсь что вы поняли основы создания WEB-страниц.Для того что бы сделать хороший сайт,который пользовался бы успехом в Интернете, надо знать намного больше .К примеру вам надо изучить языки JavaScript,PHP,MySQL и другие ,каскадные таблицы CSS,в общем все это придет вам со временем.
Удачи!
Как создать таблицу стилей CSS в блокноте
Что такое CSS
CSS означает каскадную таблицу стилей. Код CSS используется для оформления HTML-документа. Когда вы создаете веб-сайт, браузер читает файл HTML и любой код CSS, JavaScript и т. Д., Записанные в HTML. Затем он отображает его в соответствии с указаниями кодов.
Иногда код CSS пишется прямо в HTML. Это называется внутренней таблицей стилей . Код пишется между тегами и с использованием тега