Как создать свой сайт
В этой статье, мы рассмотрим пошаговую инструкцию, как самому и бесплатно создать свой сайт с нуля, подробно разложим по полочкам, каждый этап разработки веб-проектов.
Этап 1. Планирование сайта
Создание сайта начинается с этапа планирования. Здесь мы определяем целевую аудиторию будущего сайта (его посетителей), задачи, которые он должен решать, и цели (для чего мы создаем сайт). На этапе планирования очень полезным может быть изучение сайтов схожих тематик или сайтов конкурентов.
Определившись с целями сайта, его аудиторией и задачей, а также посмотрев сайты конкурентов, мы можем приступить к планированию контента. Определить, чем мы будем наполнять сайт, какие должны быть у сайта разделы, какие должны быть у сайта функциональные блоки. И после того, как мы все это определили, можем переходить к следующему этапу — этапу дизайна.
Этап 2. Дизайн сайта
Подробнее
Этап 3. Верстка сайта
Язык разметки HTML.
Что это такое?
HTML (язык разметки) состоит из различных команд. На профессиональном жаргоне вебмастеров они называются «тегами». Всего тегов около 100, но наиболее часто (практически постоянно) приходится работать примерно с 30-ю, поэтому в процессе использования они запоминаются очень быстро. Про остальные тоже необходимо знать, чтобы быть в курсе всех возможностей HTML и при необходимости, возможно, с помощью справочников, воспользоваться ими.
Принцип верстки страниц с помощью HTML в следующем. В каком-нибудь простом текстовом редакторе либо в обычном блокноте пишется статья. Затем части этой статьи разделяются на блоки с помощью тегов.
Допустим, у вас есть строка, которую вы хотите сделать заголовком. И тогда в начале этой строки вам нужно вставить тег заголовка h1. В конце же — вставить закрывающий тег заголовка h1.
Чтобы сделать из части текста абзац, нужно в начале части текста вставить тег p, а в конце — p. Если хотите сделать текст жирным, используйте теги strong. Получившийся документ нужно сохранить в файл с расширением .html.
Откройте этот файл с помощью браузера и — вуаля! — у вас уже готова страница сайта.
Таким образом, с помощью тегов веб-верстальщик создаёт структуру контента HTML-страницы, размечает, где должны быть заголовки, абзацы, ссылки, таблицы, изображения, видео, формы и многое другое.
С помощью тегов также создаётся и структура страницы сайта, размечается, где будет расположена шапка сайта, основной контент, сайдбар и подвал.
Оформление страницы
CSS
CSS — второй основной инструмент верстальщика. Язык HTML и CSS изучают совместно. Они неразлучны, как день и ночь, и составляют в современной веб-вёрстке единое целое.
Рассмотрим CSS.
CSS отвечает за внешний вид страницы. И, если с помощью HTML мы задавали структуру страницы, делали ее разметку, то, используя CSS, мы задаем визуальное оформление страницы. Именно в CSS мы задаем размеры блоков, указываем шрифт, размер шрифта, цвет текста, фоновые цвета и изображения и т.д.
Например, с помощью CSS вы можете изменять цвет, фон, шрифт, ширину, высоту, положение, форму и многое другое у любого элемента страницы.
Помимо изменения тегов контента (заголовков, абзацев, таблиц и т.д.), с помощью CSS форматируется так называемая модульная сетка сайта, благодаря которой создаётся структура сайта и отмечается, где будет шапка, контент, сайдбар и подвал сайта.
Если HTML в качестве основного понятия оперирует тегами, то CSS оперирует понятием CSS-свойства, которые назначаются тегам. Схема назначения CSS-свойства тегу выглядит следующим образом: тег { css-свойство: значение; }, т.е. в CSS-коде мы сперва задаём имя тега, а затем для него мы указываем нужные свойства с нужными значениями.
Современное создание сайтов не обходится без адаптивной вёрстки — когда один и тот же сайт хорошо смотрится и на экранах больших мониторов компьютеров, и на маленьких экранах смартфонов. В адаптивной вёрстке нам тоже помогает CSS, благодаря имеющимся у него медиазапросам.
Например, можно первым делом сверстать сайт на популярное разрешение монитора, а после, используя медиазапросы, указать, чтобы сайт подстраивался под мобильные устройства.
Некоторые сначала верстают под малое расширение экрана, а затем подстраивают вёрстку под большие экраны.
Подробнее
JavaScript— клиентский язык программирования jQuery (библиотека JavaScript), DOM, BOM
Последний язык, которым должен хорошо владеть верстальщик — язык JavaScript.
На современных сайтах уже практически не обходятся без различных слайдеров, эффектных галерей, анимаций, каруселей и многого чего ещё. Всё, что двигается, прыгает, исчезает и появляется на открытой вами веб-странице — всё это сделано с помощью языка JavaScript и его популярной библиотеки jQuery.
Как и любой другой язык программирования, JavaScirpt довольно сложен в изучении. Особенно для неподготовленных специалистов. Поэтому, чтобы хоть как-то облегчить процесс освоения языка JavaScript, добрыми людьми были придуманы различные библиотеки языка JavaScript, которые немного облегчают разработку программ на нём.
Самая популярная на данный момент библиотека JavaScript — это jQuery.
Помимо самого JavaScript, вам также желательно познакомиться с двумя понятиями DOM и BOM.
DOM — это объектная модель документа. Благодаря ей браузер создаёт из HTML-документа дерево элементов (объектов) страницы. Где в качестве элементов выступают заголовки, абзацы, таблицы и остальные теги, представленные на странице. У элементов имеется свой уникальный адрес и, обращаясь по этому адресу, JavaScript может получать доступ к элементам страницы и манипулировать (управлять) ими.
BOM — это объектная модель браузера, где в качестве элементов выступают уже не теги HTML-документа, а объекты браузера: окно браузера, экран, адресная строка, история посещений и т.д.
То есть у нас есть DOM, есть BOM и управлять ими мы можем, используя JavaScript. Чаще всего и больше всего приходится работать с объектной моделью документа (с DOM). Программно управляя элементами DOM, и создается большинство скриптов: галерей, каруселей, слайдеров и т.д. Поэтому особое внимание при изучении JavaScript стоит уделить изучению и работе с DOM.
Резюмируем
Чтобы стать хорошим верстальщиком, вам нужно знать:
1. основы Photoshop
2. все теги, включая HTML5 и свойства CSS3
3. адаптивную вёрстку
4. синтаксис языка JavaScript
5. библиотеку языка JavaScript–jQuery
Локальный веб-сервер — OpenServer
Мы, наконец, подошли к вопросу «Как стать веб-программистом?».
Веб-программист должен хорошо знать два языка — PHP и SQL.
Чтобы работать с данными языками, у вас на компьютере должен быть веб-сервер Apache, интерпретатор PHP и сервер баз данных MySQL.
Все эти программы долго и нудно устанавливаются и настраиваются. Однако всё те же добрые люди создали специальные сборки, где всё это уже установлено и настроено. Вам остаётся лишь зайти на их сайт, скачать сборку и установить на своём компьютере.
Одной из самых популярных сборок локального веб-сервера сейчас считается OpenServer, установив который вы сразу сможете создавать на своём компьютере скрипты (программы, созданные на языке PHP) и базы данных на сервере MySQL.
PHP — серверный язык программирования
PHP — это серверный язык программирования, основной язык веб-программиста при создании сайтов. Например, все популярные CMS (движки сайтов) созданы именно на языке PHP.
С языком PHP создают различные web-приложения (скрипты): CMS (движки сайтов), форумы, гостевые книги, комментарии, рассылки, рейтинги и многое, многое другое.
Также с помощью языка PHP можно отправлять SQL-запросы к базе данных для управления информацией, хранящейся в ней.
Как мы выяснили ранее, JavaScript манипулирует элементами на странице (тегами). PHP же манипулирует данными (информацией), которые хранятся в текстовых файлах на сервере или в базе данных на сервере MySQL.
Так же, как и у JavaScript, у языка PHP для облегчения создания веб-приложений (сайтов, форумов, блогов и т.д.) имеются свои фреймворки.
Фреймворков достаточно много — можете выбрать любой из них. Но прежде чем создавать web-приложения с помощью фреймворков, вам нужно выучить синтаксис языка PHP, а также изучить концепцию объектно-ориентированного программирования в PHP (ООП).
Самые популярные фреймворки PHP: Laravel, Kohana, Zend, Symfony, Yii, CodeIgniter, Phalkon, Cake PHP.
Подробнее
MySQL — сервер баз данных
MySQL — это сервер баз данных. В MySQL хранятся различные данные, относящиеся к сайту: статьи, названия страниц, URL-адреса, комментарии, даты создания и т.п. Чтобы уметь работать с базами данных, находящимися на сервере MySQL, вам нужно изучить язык SQL.
Так же, как и язык PHP, сервер баз данных MySQL — основной при создании сайтов на стороне сервера.
Информацией, хранящейся в базе данных, управляют с помощью SQL-запросов. SQL —это язык структурированных запросов. С ним можно редактировать, удалять, читать и добавлять информацию в базе данных на сервере MySQL.
Практически все популярные сервера баз данных — PostgreSQL, MSSQL, Oracle, SQLite, Firebird — понимают язык SQL. Поэтому вы легко сможете переключиться с одного сервера баз данных на другой, если вам по работе понадобится это сделать. Но, как я и говорил, при создании сайтов обычно работают с сервером MySQL.
Информация в базе данных сервера MySQL хранится в таблицах. У каждой таблицы есть своё уникальное имя. Таблицы в свою очередь состоят из строк и столбцов (у каждого столбца имеется своё имя и тип данных). На пересечении строк и столбцов находятся ячейки — именно в этих ячейках и хранятся данные.
Чтобы получить какую-либо информацию из базы данных или изменить её, используют SQL-запросы.
SQL-язык намного легче языков программирования JavaScript или PHP.
Создавать базу данных и управлять информацией на ней можно не только с помощью SQL-запросов, но еще и с помощью различных программ, самая популярная из которых phpMyAdmin.
Там всё происходит в визуальном режиме. Данная программа установлена на большинстве хостингов. PhpMyAdmin также установлен в пакет программ веб-сервера OpenServer.
Резюмируем
Чтобы стать хорошим веб-программистом, вам нужно знать:
1. Основы работы с веб-сервером.
2. Файл конфигурации веб-сервера .htaccess.
3. Язык PHP и ООП PHP.
4. Сервер баз данных MySQL.
5. Язык запросов SQL.
6. Любой один фреймворк PHP.
Языки PHP, SQL и всё, что связано с веб-сервером — всё это вместе часто называют Back-end – разработкой (т.е. разработкой на стороне сервера). Ведь чтобы создать сайт на этих языках, вам нужен веб-сервер.
CMS — движок сайта
Популярные CMS: WordPress, Joomla, Drupal, Netcat, Bitrix
CMS бывают платными и бесплатными. В пространстве рунета популярными платными CMS являются Netcat и Битрикс, а бесплатными — WordPress, Joomla и Drupal. Практически все веб-программисты при создании сайтов используют какую-нибудь популярную CMS либо создают свою CMS.
Чтобы создать сайт с помощью CMS, необязательно знание языка программирования. Однако, если вы хотите использовать уникальный дизайн или свою собственную функциональность, нужно подтянуть владение языком PHP.
Что такое SEO.
SEO является аббревиатурой от Search Engine Optimization, что в переводе означает оптимизация под поисковые системы или просто поисковая оптимизация. SEO - это наука о том как вывести сайт в топ поисковых систем под определенный запрос.
Также SEO изучает методы оптимизации сайта анализ конкурентов работу с сылочной массой.
Для того чтобы заниматься SEO не требуется знаний программирования, но надо минимально знать теги HTML.
Покупка домена и хостинга для сайта
После создания сайта его нужно разместить в сети Интернет, чтобы на него могли заходить посетители из любой точки мира. Для этого нам нужен хостинг.
Проще говоря, это реальный сервер в интернете, на который мы должны перенести сайт с локального сервера.
Далее нам необходимо приобрести домен — так называемое имя сайта. Домен необходим для того, чтобы ваш сайт могли найти в интернете по его имени.
Для русскоязычных компаний в конце имени домена обычно используют .ru Примеры имени домена: yandex.ru, mail.ru
Купить (зарегистрировать) имя домена в зоне .ru можно за 390 грн. в год.
Как правило, домен и хостинг приобретаются в одном месте, в одной и той же компании.
Популярные курсы
HTML
HTML — язык гипертекстовой разметки, главная его задача, это создание логической структуры WEB-страницы, грубо говоря её каркаса. В тесной взаимосвязи с HTML, выступают каскадные таблицы стилей или CSS, они в свою очередь отвечают за визуальное оформление HTML-странички, например через css настраивают шрифт, цвет и многое другое.
Photoshop
Углублённый уровень курса Photoshop посвящён освоению профессиональных приёмов и инструментов ретуширования изображений. Практическая работа на реальных примерах, поможет Вам получить навыки исправления дефектов изображений различной сложности. Кроме того Вы научитесь решать и другие актуальные задачи, например коллажирование, оптимизация изображений для Internet и многое другое! Обучения проводится с использованием графических планшетов.
Javascript
На курсе JavaScript Вы освоите самый популярный язык web-программирования. Практически невозможно найти сегодня сайт, который в принципе не использует JavaScript. Интернет-магазины, фотогаллереи, всплывающие формы и тысячи других интерактивных элементов на сайте создаются именно с помощью JavaScript. На занятиях Вы изучите конструкции JavaScript’a, основной функционал, объектно-ориентированный подход и многое другое. По завершению курса JavaScript Вы будете готовы к прикладному применению этого языка программирования.
SEO
Разработка и продвижение сайтов очень востребованные услуги в наше время. Следуя поговорке: «Если вас нет в Интернете, то вас не существует», и компании и люди хотят быть представлены в сети, в этом Вам могут помочь курсы SEO в Днепропетровске. Работа для WEB-разработчика найдется всегда, причем хорошо оплачиваемая – в среднем 1500 у.е. в месяц.