1


 
 
 

МЕХЗАВОД | Сайтостроение для начинающих

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » МЕХЗАВОД | Сайтостроение для начинающих » Почему так важен план обучения » Основы сайтостроительства для новичков.


Основы сайтостроительства для новичков.

Сообщений 1 страница 4 из 4

1

Для начала давайте разберемся, во всех этих странных названиях: домен, хостинг, ip-адрес, днс-сервер, веб-сервер, php, html, javascript, css, сайт, страница, скрипт,  верстальщик, дизайнер, веб-программист..

Прежде всего, нам нужно получить сайт. Сайт, это в понимании пользователя, какой-то адрес в интернете, куда можно зайти и что-то там увидеть или сделать. Например, есть сайт Вконтакте (http://www.vk.com), сайт Одноклассники (http://www.odnoklassniki.ru), сайт Google (http://google.com) или мой сайт на котором вы находитесь.

Просматривают сайты через специальный программы, браузеры (или броузеры от англ browser). Вот и вы сейчас смотрите этот сайт в браузере, всего скорее ваш браузер называется Internet Explorer, FireFox, Chrome, Safari или Opera.
   

Все сайты состоят из страничек, когда вы нажимаете на какую-нибудь ссылку, то открывается страничка сайта. Например, вот одна страничка: Лебедь влюбился в вертолет, а это другая: О создании «Винни-Пуха» снимут фильм, одного и того же сайта lenta.ru.

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

Сайт - это некая программа, написанная по определенным правилам, которая и показывает пользователю все эти красивые странички. Давайте на пару секунд глянем на этот код, код сайта: если вы в браузере Firefox или Chrome нажмите сочетание кнопок Ctrl+U, если в Internet Explorer, нажмите Alt и выберите из верхнего меню Вид>Просмотр HTML кода. Откроется новое окошко и вы увидите html-код, примерно вот такой:
Исходный код сайта
http://s9.uploads.ru/t/CBkR9.png

Исходный код сайта

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

На этом этапе вы должны понимать следующее:

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

2

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

Прежде всего нужен дизайн сайта. Дизайн сайта, это графическое представление того, как будет выглядеть сайт. Т.е. проще говоря, картинка сайта, вот пример:
http://s3.uploads.ru/AiqH0.jpg

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

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

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

3

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

http://s3.uploads.ru/t/3uHNj.jpg

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

http://s9.uploads.ru/t/qlzp3.jpg

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

http://s3.uploads.ru/t/AW8kw.jpg

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

http://sd.uploads.ru/t/o92Vg.jpg

Сами языки сценариев стоит поделить на две группы, те которые выполняются на стороне сервера, и те которые выполняются на стороне клиента. Если скрипт выполняется на стороне сервера, например PHP скрипты или CGI скрипты, то пользователь сайта не сможет получить к ним доступ. В результате выполнения скрипта, пользователю будет выдан лишь простой HTML код. Встроенные языки сценариев, те, которые выполняются на стороне клиента, являются открытыми, и могут находиться в отдельном файле, или же быть встроенными прямо в HTML, код, пользователь всегда может просмотреть их код, примером являются JavaScript или VBScript. Для придания динамики сайту можно также использовать Java апплеты. Код апплета загружается с веб-сервера, и браузер, либо вставляет апплет в веб-страницу, либо открывает другое окно с собственным пользовательским интерфейсом апплета.

http://s7.uploads.ru/t/HyJ1O.jpg

При изучении основ веб-программирования, стоит параллельно изучить роботу с базами данных, например, популярная база данных MySQL. В базе данных хранится вся та информация, которая впоследствии будет выведена на страницы веб-сайта. По сути база данных сайта ничем не отличается от той базы данных, которая применяется в наборе Microsoft Office – Microsoft Access, назначение одно – хранение данных.

http://s7.uploads.ru/t/bT07a.jpg

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

    Правильный выбор кодировки для сайта, нужно учитывать в какой области интернета вы планируете показывать свой сайт, ваш сайт рассчитан на русскоязычную публику, или же на более широкую аудиторию.
    Проверка внешнего вида хотя бы в пяти основных браузерах – каждый браузер по своему интерпретирует язык HTML, больше всего трудности могут возникнуть с браузером Internet Explorer, он является головной болью многих веб-программистов.
    Проверка данных, которые вводит пользователь, не только в поля формы, но и в сам URL адрес. Следует изучить понятия XSS атак и SQL инъекции, именно с их помощью чаще всего взламываю сайты.

http://s5.uploads.ru/t/OK6r3.jpg

4

Основы языка WEB программирования HTML

Ссылка

Ссылка


Вы здесь » МЕХЗАВОД | Сайтостроение для начинающих » Почему так важен план обучения » Основы сайтостроительства для новичков.


создать форум