Главная / Интернет / Как сделать сайт самому №1. Что такое сайт?

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

30.10.2015

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

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

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

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

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

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

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

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

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

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

<html>
  <meta charset="utf-8">
  <header><title>Это мой первый сайт</title></header>
    <body>
    Привет мир! Я создал свой первый сайт
    </body>
</html>

<html>

<header><title>Это мой первый сайт</title></header>

<body>

Привет мир! Я создал свой первый сайт

</body>

</html>

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

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

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

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

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

<html>
        ...
</html>

<html>

...

</html>

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

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

<meta charset="utf-8">

1	<meta charset="utf-8">

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

<header>
  ...
</header>

...

</header>

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

<title>Это мой первый сайт</title>

1	<title>Это мой первый сайт</title>

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

<body>
    Привет мир! Я создал свой первый сайт
</body>

<body>

Привет мир! Я создал свой первый сайт

</body>

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

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