Руководства, Инструкции, Бланки

как сделать сайт на Php пошаговая инструкция

Категория: Инструкции

Описание

Как написать сайт на php с нуля для чайников: лучшие книги и видео

Как за пару месяцев научиться с нуля писать сайт на PHP

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

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

Что же такое PHP?

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

Говоря простыми и доступными словами, php это язык программирования, специально разработанный для создания сценария веб-приложения, который исполняется на web-сервере. Это достаточно востребованный язык программирования, так как 85% веб-сайтов используют его.

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

Обучаемся эффективно

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

Затем нам нужно скачать компилятор. Это программа, которая построчно считывает ваш скрипт как инструкцию и исполняет ее.

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

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

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

Книги для обучения

Скажу сказу, я не фанат книг. Когда речь идет о интернет-технологиях. Это все равно что объяснять человеку из племени Масаи что такое wi-fi. Никакие рисунки не помогут нормально все понять. И тем не мене, я хочу предоставить вам небольшой список книг по php для чайников, которые котируются среди профессионалов.

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

PHP и MySQL. Разработка Web-приложений – отличная книга которая подойдет новичку. Первым делом автор покажет как настроить Apache (HTTP-сервер), PHP и MySQL (база данных), затем подскажет, как выбрать редактор кода. В книге рассматривается: синтаксис языка, самые полезные функции, создание собственного движка и ряда других функций.

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

HTML, JavaScript, PHP и MySQL. Джентльменский набор Web-мастера – Это более детальный учебник по изучению php. В нем затрагиваются несколько других полезных языков программирования. без которых полноценное создание веб приложений невозможно.

Читается достаточно легко, подходит для самостоятельного изучения и обучения студентов. Автор затрагивает такие темы как: основы php, динамическое формирования страницы при помощи CSS (каскадная таблица стилей), администрирование баз данных, создания динамических страниц при помощи JavaScript.

Создаем динамические веб-сайты с помощью PHP, MySQL, JavaScript, CSS и HTML5 – данную книгу я бы посоветовал более продвинутым читателям, которые уже обладают основными навыками HTML верстки. Если вы когда-либо изучали это, и еще помнете основные принципы тогда эта книга для вас.

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

PHP и MySQL. От новичка к профессионалу – и завершает наш обзор книга Кевина Янка, в ней автор делает сильный уклон на создание веб-приложений с базой данных.

Книга очень легкая, отлично подойдет для самостоятельного обучения.

Видео с YouTube

По своему опыту скажу что, обучатся php по роликам из ютуба достаточно сложно. Хоть они и кажутся простыми. В отличии от уроков по фотошопу, которые я обожаю, изучать языки программирования в ютубе просто невозможно. Даже видео длиной всего в 15 – 20 минут вызывает массу неудобств.

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

Такие видео могут отбить желание самому набирать код. Зачем, если за вас уже все сделал автор: набрал, запустил, показал на конкретном примере как все работает? В результате запомнить что-то практически невозможно.

Обучающий курс

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

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

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

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

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

Если вы мечтаете о том, чтобы научиться создавать сайты без CMS. сами и на php, то это лучший для вас вариант.

Ну вот и все. Подписывайтесь на рассылку. До новых встреч и удачи в ваших начинаниях.

как сделать сайт на php пошаговая инструкция:

  • скачать
  • скачать
  • Другие статьи

    Как сделать сайт на wordpress самостоятельно и бесплатно

    Как сделать сайт на wordpress самостоятельно и бесплатно. Вторая часть

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

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

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

    Навигация по странице как сделать сайт на wordpress самостоятельно:

    Настройка сайта на wordpress: подключаем шаблон Типичные вопросы

    Зачем нужно делать настройку сайта?

    Каждая тема wordpress - индивидуальная. Мы должны сделать настройки сайта под нее. Также стоить учесть тот факт, что если настроить вордпресс на одну тему, то автоматически на вторую он не перестроится. Нужно будет делать вторую настройку.
  • Как сделать сайт визитку wordpress на шаблоне?

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

  • к меню В предыдущей статье я говорил, что у вас должен быть установлен wordpress на сервере, желательно на реальном, а не локальной эмуляции, но не критично. Также, у вас должен быть установлен ФТП клиент, я например использую файлзилу. Это бесплатный ФТП клиент, его можно скачать вот здесь: Получить ссылку на (filezilla) .

    В установке нет ничего сложного, все предельно понятно. Если у вас другой фтп клиент, можете пользоваться им.

    Если вы работаете с локальной машиной, то вам фтп не нужен, вы можете закинуть файлы в нужное место с помощью копировать/вставить.

    Пошаговая инструкция как сделать сайт на wordpress

    1) к меню Открываем свой сервер по фтп, надеюсь вы уже залили и установили WordPress, у вас есть доступ к админке + сайт открывается с вашего домена.

    2) Зашли по фтп, движемся вперед пока не увидим вот такие файлы справа, как у меня на скине: Ключевые папки "wp-admin". "wp-content". "wp-includes". Это место нужно запомнить, называется корень сайта.

    3) С корня сайта идем по таком адресу: открываем "wp-content", потом "themes". Это место для заливки шаблона. Открываем слева во вкладке папку с нашим шаблоном и заливаем, как это делаю я на скине: Залили? - теперь мы можем активировать нашу тему.

    4) Заходим в админку сайта, раздел мойсайт/wp-admin/themes.php там должен появиться наш шаблон, его нужно активировать (нажать на кнопку "Активировать"), как на скине (кликабельный откроется поверх всех окон в просмотре) Это сообщение говорит нам что мы все сделали правильно: В противном случаи нужно искать где мы допустили ошибку.

    5) Продолжаем урок как сделать сайт на wordpress дальше. Нужно настроить на сайте ЧПУ, я это делаю вот здесь: вашсайт/wp-admin/options-permalink.php

    Выберите чекбоксы как у меня на скине и сохраните:

    Более подробно о ЧПУ wordpress описано по ссылке. Там вы найдете список проблем, которые могут у вас возникнуть и как избавится от траблов.

    Если вам не нужны человеко понятные ссылки, можете пропустить этот пункт.

    6) Устанавливаем плагины.

    Это пожалуй один из самых важных моментов, без него сделать сайт на wordpress у нас не получится.

    Добавлять плагины будем через админку сайта (это можно сделать по адресу ваш_сайт/wp-admin/plugin-install.php)

    Справа вводим название плагина, жмем enter и в результатах поиска активируем его. Показываю пример в виде скина:

    Вставляю список плагинов, которые нам нужны:

    • TinyMCE Advanced - хороший текстовый редактор
    • Yoast SEO - для оптимизации СЕО заголовков и мета
    • WP-PageNavi - для пагинации
    • Contact Form 7 - сделаем форму обратной связи в контактах
    • Rus-To-Lat - для преобразования ЧПУ из кириллицы в транслит.

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

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

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

    Ссылка на настройку (перед адресом нужно подставить ваш домен)

    8) Теперь предлагаю сделать структуру и создать наполнение для нашего сайта. Собственно заходим в раздел добавить страницу (ваш_сайт/wp-admin/post-new.php?post_type=page) и делаем в соответствии с ТЗ такие страницы:

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

    9) Открываем вкладку записи, рубрики, вот по этой ссылке ваш сайт/wp-admin/edit-tags.php?taxonomy=category, там должна быть рубрика "Без рубрики", ее мы должны переименовать в "Новости". Можно создать новую рубрику с таким названием. Теперь нам нужно получить ее ИД. Нажимаем мышкой на рубрику новости и попадаем в редактор. Нас интересует только URL, например у меня оно такое: где цифра 2 после tag_ID= и есть наш идентификатор. Спросите зачем он нам, читайте следующий пункт как сделать сайт на wordpress.

    10) У каждого ВП сайта есть свой редактор, находится по этой ссылке вашдомен/wp-admin/theme-editor.php заходим туда и выбираем вкладку справа "Боковая колонка sidebar.php", смотрите рисунок:

    В этом же рисунке, я выделил код который нас интересует cat=1, вот число 1 нужно заменить на наш идентификатор, в моем случае на 2. и нажать Обновить файл в низу.

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

    11) WordPress версии 4.4 немного изменил вывод меню, и теперь наш код будет плохо смотреться. Для этого нам нужно повторить п. 10, только теперь открывать нужно файл "Функции темы functions.php" и в самый конец забросить вот такой код

    add_filter('wp_nav_menu_items', 'filter_menu_items');
    function filter_menu_items($menu_items)<
    return str_replace('</li><li', "</li> <li", $menu_items);
    >

    11.1) Еще маленькая проблемка, в своей верстке я допустил ерундовую ошибку. Можно было б на ее забить, но лучше исправить. Для этого в том же редакторе темы, открываем вкладку "Таблица стилей style.css" и находим вот такой селектор: "#right".

    Сейчас у него вот такие стили:

    а нам нужно сделать вот такие:

    12) Совсем забыл, нам же нужно еще сделать наполнение рубрики новости, заходим во вкладку "Записи" - "Добавить новую", она по этой ссылке вашдомен/wp-admin/post-new.php и создаем несколько новостей, желательно 5 или больше штук. Вот краткий пример Не забываем о разрыве новости, more.

    13) Далее, для того чтобы сделать сайт визитку на wordpres нам нужно главную страницу сделать страницей, вместо блога. Заходим в настройки, эта ссылка ваш_сайт/wp-admin/options-reading.php

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

    Незабываем сохранять свои правки в настройках.

    14) Нам нужно перейти в раздел меню и создать там его. Раздел находится по ссылке вашдомен/wp-admin/nav-menus.php. заходим и там же нажимаем "создайте новое меню"

    14.3) Добавляем с левой части пункты которые нам нужны (ставим чекбокс напротив их и нажимаем "добавить в меню"):

    Мне кажется, что урок как сделать сайт на wordpress подходит к концу :).

    Сделать сайт на wordpress самостоятельно: проверяем работу

    к меню Вот мы и настроили наш шаблон на CMS WordPress. Открываем наш сайт по ссылке вашдомен и смотрим его работу. Вставляю парочку скинов, как это выглядит у меня:

    Довольно много времени у меня ушло на этот урок. Надеюсь статья как сделать сайт на wordpress будет вам полезной и интересной.

    Работа над ошибками поста как сделать сайт на wordpress

    к меню Как говорит пословица:

    не ошибается только тот, кто ничего не делает

    В моей ситуации, также есть ошибки и промахи.

    1. Забыли сделать страницу 404.php для отображения ошибки 404. Эти свойства на себя берет сейчас index.php хотя его нужно допилить в таком случае.
    2. Забыли сделать страницу single.php для отображения полной версии новости. Сейчас за это отвечает тоже файл index.php. Этот файл можно сделать амостоятельно с page.php. Нужно просто скопировать переименовать и вставить. Возможно добавить дату новости с сайдбара.

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

    Думаю после прочтения этих двух уроков вы болжны понимать как это сделать.

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

    На этом у меня все, большое спасибо за внимание. Надеюсь мой пост вам пригодился.

    Как сделать сайт в блокноте

    Как сделать сайт в блокноте html и css-технологиями


    Сайт на самом деле представляет собой набор файлов из кода на нескольких языков. А код можно писать в любом нормальном текстовом редакторе, даже в блокноте. Конечно, лучше использовать более продвинутый софт, вроде Notepad++. Ну да ладно, давайте посмотрим, как сделать сайт в блокноте html и css-средствами.

    Как создать сайт с нуля на html в блокноте — пошаговая инструкция

    А вот оно и наше ключевое слово – HTML. Да-да, именно с этого языка начинается создание сайта. Без него невозможно представить себе веб-разработку. Это все равно что варить борщ без воды. Не спешите закрывать страницу, если вы абсолютный ноль в html. В этой пошаговой инструкции мы вместе создадим простой сайт, а я попробую объяснить те куски кода, которые мы будем добавлять в блокнот.

    Шаг 1. Создание файлов

    Создание html сайта в блокноте нужно начать с того, что создать два текстовых документа в какой-нибудь пустой папке. Один должен получить расширение .html, а второй .css. Имена могут быть любыми. Заметьте, не site.html.txt. а именно site.html .

    Шаг 2. Закладываем структуру

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

    Давайте и мы вставим что-то в наш документ, а то совсем пусто.

    Итак, мы вставили сразу кучу тегов и может быть вы ничего не понимаете. Попробуйте открыть страничку в браузере. Там вы увидите слова “Привет, мир” если все сделано правильно. Это и есть, по сути, простейшая веб-страничка.

    Минуточку вашего внимания: Все мы хотим размещать свои сайты на надежном хостинге. Я проанализировал сотни хостингов и нашел лучший - HostIQ В сети сотни положительных отзывов о нем, средняя оценка пользователей - 4.8 из 5. Пусть вашим сайтам будет хорошо.

    Но мы пойдем дальше. Нам нужно что-то похожее на web-страничку и именно этим мы и будем заниматься дальше. А пока я вкратце я объясню те теги, которые уже написаны:
    html – контейнер для всех остальных тегов. В нем содержится вся веб-страница.
    В самом верху мы указали тип документа. Тег head – это служебная информация о странице. Тут мы с помощью тега <title> задали название страницы, которое будет выводиться в строке браузера вверху. Далее задали кодировку и подключили css-файл с помощью тега <link> .

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

    Шаг 3. Планирование

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

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

    Шаг 4. Начинаем!

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

    Итак, вернемся к коду. Писать мы его будем в теге body, так как он и являет собой будущую страницу. Можете смело удалить надпись привет, мир, и напишем вот что:

    Таким образом мы создали один большой блок, в которой поместили остальные 4. Блок в html создается парным тегом div. который не имеет обязательных атрибутов, но я сразу добавил каждому из них уникальный id (идентификатор), чтобы позднее оформить внешний вид через CSS.

    Шаг 5. Нам поможет CSS

    Теперь начнем оформлять наши блоки. Конечно же, нужно начать с самого большого контейнера. Мы создали css-файл в самом начале, но так и не написали в него ничего. Самое время это исправить. Добавим туда такой код:

    *<
    box-sizing: border-box
    >
    #main<
    width: 810px;
    margin: 0 auto;
    border: 5px solid black
    >

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

    Мы установили общему контейнеру ширину в 810 пикселей, правило margin: 0 auto устанавливает блок по центру, то есть наш сайт будет отображаться красиво по центру, а не прижат к левому краю. Последнее свойство border добавляет черную сплошную рамку с каждой стороны блока.

    Что ж, стили для главного контейнера мы сделали. На веб-страничке у нас по-прежнему отображается 4 строчки с текстом, но уже в черной рамке. Идем дальше.

    Другая полезная статья: Как сделать таблицу в таблице в html?

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

    #header<
    height: 100px;
    border-bottom: 5px solid black
    >
    #sidebar<
    width: 200px;
    height: 500px;
    float: left;
    border-right: 5px solid black
    >
    #content<
    width: 600px;
    float: right;
    height: 500px
    >
    #footer<
    height: 75px;
    clear: both;
    border-top: 5px solid black;
    >

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

    А вот дальше все становится интересней. Дело в том, что по умолчанию блоки отображаются сверху вниз, если их просто написать в html-коде и никаких дополнительных правил не задавать. Но ведь боковая колонка на то и боковая, чтобы отображаться сбоку от основной части страницы. А как это сделать? Смотрите, мы сайдбару задаем высоту, ширину, рамку и еще одно свойство ( float: left ).

    Это правило означает, что элемент будет прижат к левому краю родителя (то есть родительского элемента – блока #main ). Отлично, теперь такое же свойство зададим блоку с контентом и он тоже прижмется к левому краю, но уже вслед за боковой колонкой.

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

    Наконец, осталось описать последний блок – footer. Он получает небольшую высоту, рамку с высоту и еще одно новое для нас свойство. Это свойство clear со значением both. Зачем его писать? Мы с вами прижали два предыдущих блока к левому краю. Они стали так называемыми плавающими блоками, но по умолчанию обычные блоки могут не замечать плавающие и наезжать на них.

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

    Шаг 6. Разукрашиваем сайт

    Следующий, очень интересный этап – давайте добавим каких-то цветов нашему сайту. Пусть у него будет не сплошной белый фон, а что-то поинтереснее. Задать фон можно двумя способами:

    • Общий фон сразу всему сайту, прописав его общему контейнеру #main
        Если каждый из основных блоков должен иметь свой отеннок цвета, то тогда нужно каждому задать цвет отдельно. Но лучше сильно не увлекаться – красная шапка, зеленый контент и желтый подвал будут смотреться не очень, сразу скажу

    Предлагаю сделать по первому методу. Я тут нашел в онлайн-сервисе приятный светло-синий оттенок, который и предлагаю сделать фоном сайта. Добавьте к стилям общего контейнера такое свойство

    #main<
    background: #B3C1E6
    >


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

    #header, #footer<
    background: #9091DA
    >

    Шаг 7. Работаем над шапкой

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

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

    Его нужно скачать и положить в ту же папку, где хранится html-документ.
    Теперь смотрим:

    #header<
    background: #9091DA url(html.jpeg) no-repeat 5% center
    >

    Картинку я назвал html. а ее формат – jpeg. поэтому такая запись. Дальше мы также указали такие команды: картинка-фон не должна повторяться, а разместиться должна со смещением с 5% по горизонтали от начала блока и по центру по вертикали. Сначала всегда записывается горизонтальная позиция, а потом вертикальная.

    Естественно, если у вас картинка называется по-другому или имеет другой формат, то вы должны немного изменить приведенный код. Отлично, логотип у нас есть. Пора убрать надпись – это шапка сайта и поставить вместо нее красивый заголовок. Удалим из шапки текст и вставим туда новый элемент

    Теперь его нужно оформить:

    #title<
    font-size: 32px;
    float: left;
    margin-left: 200px;
    font-family: Tahoma;
    color: yellow;
    padding-top: 20px;
    text-shadow: 0 0 5px orange;
    >

    Мы задали приличное количество стилей: размер шрифта, семейство шрифта, прижатие заголовка к левому краю, левый отступ, цвет, верхний внутренний отступ и тень текста. Объяснять работу каждого свойства сейчас нет смысла, поэтому просто скопируйте код и вставьте в таблицу стилей (css-файл).

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

    Он формирует список их трех ссылок. В действительности они должны куда-то вести, но у нас это просто пустые ссылки. Муляж Также оформим список и ссылки в нем.

    #about<
    float: right;
    list-style: none;
    margin-right: 50px
    >
    #about a<
    color: yellow;
    >

    Шаг 8. Делаем меню в боковой колонке

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

    menu<
    list-style: none;
    >

    Собственно, тут я прописал только одно правило – убрал маркеры у пунктов списка, все остальное и так устраивает. Также перед меню можно добавить заголовок и как-нибудь его оформить. Можете этим сами заняться. Заголовки пишутся в парных тегах <h1> - <h6>. где первый – самый большой (заголовок статьи), а последний – самый маленький, часто он вообще не применяется. Для заголовка меню в боковой колонке оптимально брать <h3>.

    Другая полезная статья: Как сбросить настройки css по умолчанию

    Шаг 9. Оформляем контентный блок

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

    Вот такое содержимое можно вставить в блок с контентом. Абзацы в нем формируют основное содержимое, а теги h1-h2 – заголовки и подзаголовки. Тег h1 должен быть единственным на странице.

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

    Шаг 10. Оформляем подвал

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

    #footer<
    text-align: center
    >

    Шаг 11. А нет, нет больше шагов

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

    А что с ним дальше делать?

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

    Такой способ управления сайтом давно в прошлом, хотя и имеет свои плюсы. Чтобы выложить сайт в сеть, вы должны все html-файлы, таблицу стилей и необходимые картинки забросить на какой-нибудь хостинг, платный или бесплатный. Также нужно зарегистрировать имя сайта, чтобы он как-то назывался. Домен третьего уровня можно получить бесплатно у многих компаний, а вот за домен второго уровня придется заплатить (.ru. com. ua и т.д.) Читайте здесь статью о выборе хостинга и домена, если интересно.

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

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

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

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

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

    Кстати, если вас интересует подробное изучение по HTML5 и CSS3 с нуля до результата, то советую вам прочитать эту статью. Там я говорю о других курсах и сайтах, которые могут помочь вам в изучении. По ходу вы сверстаете 3-4 реальных макета, что даст вам необходимую практику для реального трудоустройства или разработки сайтов под свои нужды. В итоге создать сайт через html не будет для вас чрезмерно сложной задачей, да и верстать вы сможете шаблоны во много раз сложнее, чем тот, что мы с вами сделали в рамках этого урока.
    Скачать исходник

    Еще материалы по HTML

    Бесплатный курс по HTML

    Премиум уроки по HTML

    Полный курс по HTML5