Как сделать сайт самому №1. Что такое сайт?

0

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

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

Моя цель — научить вас создавать полноценные сайты своими руками!

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

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

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

Что такое сайт?

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

На самом деле все просто! Сайты состоят из файлов, которые хранятся на специальных компьютерах — серверах. От обычного компьютера сервер ничем практически не отличается, единственные его отличия — это бесперебойный доступ к всемирной сети интернет, бесперебойная подача электричества, надежность работы за счет использования самых качественных компонентов. Обязательно при создании сайтов вам придётся воспользоваться редакторами растровой и векторной графики, скачать программы можно например по ссылке http://atmosoft.ru/133-adobe-illustrator.html.

Самый простой сайт, который мы с вами сегодня рассмотрим, может состоять всего из одного файла. Чтобы создать свой первый сайт откройте приложение «Блокнот» и скопируйте в него следующий код:

Теперь сохраните этот файл с расширением html (как показано ниже)

Урок по созданию сайта 1После сохранения запустите его. Если вы все сделали правильно, у вас откроется браузер в котором вы увидите следующее:

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

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

Самый главный тег с которого начинается код нашего сайта — это тег <html>. Этот тег парный и если вы обратите внимание на код в самом верху он открывается, а в самом низу закрывается:

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

Следующий тег <meta charset=»utf-8″> является одиночным, он указывает на кодировку, с помощью которой нужно отображать сайт

Тег <header> он же <head> парный, в его рамках заключена информация «Шапки» сайта: заголовок страницы, пути к файлу стилей, кодировка и т.д. Вся эта информация  не отображается на странице и не видна пользователю, но участвует в работе сайта

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

Следующий тег <body> — это парный тег, в котором задаётся код для отображения на странице сайта. Вся информация указанная между этими тегами, будет отображена на странице

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

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

Рекомендую:


Комментарии:


Присоединяйся к нам